Generador de sombras

Crea sombras para tarjetas, botones y ventanas con varias capas, sombras interiores y presets profesionales. Copia el CSS o la clase de Tailwind.

¿Qué es box-shadow?

box-shadow dibuja una sombra alrededor de la caja de un elemento (respetando su border-radius). Cada sombra tiene hasta seis partes:

.caja {
  /*          X    Y    desenfoque  expansión  color */
  box-shadow: 0    10px 30px        -5px       rgba(0, 0, 0, 0.2);
}

• X / Y: cuánto se desplaza la sombra a la derecha y hacia abajo (valores negativos = izquierda / arriba).
• Desenfoque (blur): qué tan difuminado es el borde. 0 = sombra dura.
• Expansión (spread): agranda (positivo) o encoge (negativo) la sombra antes de desenfocarla.
• Color: casi siempre negro con poca opacidad (rgba(0, 0, 0, 0.1)).
• inset (opcional, al inicio): la sombra se dibuja dentro del elemento, como si estuviera hundido.

Puedes separar varias sombras con comas. La primera de la lista queda encima de las demás.

Generador

Elige un preset y ajústalo. Selecciona una capa en la lista para editarla, súbela o bájala con las flechas, o añade capas nuevas.

Generador de sombras

Capas de sombra

0 10px 30px -5px rgba(0, 0, 0, 0.2)

Capa seleccionada

Desplazamiento XpxDesplazamiento Ypx

DesenfoquepxExpansiónpx

ColorOpacidad Sombra interior (inset)

Elemento

Color de fondoRadio del bordepx

.caja {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2);
}

Consejos de uso

• Varias sombras suaves se ven más reales que una sola fuerte. El preset Capas realistas apila cinco sombras que se duplican en tamaño: así se ve la luz en el mundo real.
• Usa poca opacidad: entre 0.05 y 0.25 para interfaces claras. Una sombra muy negra se ve anticuada.
• Expansión negativa + desplazamiento en Y da la sensación de que el elemento flota por encima de la página sin "ensuciar" los lados.
• Sombras de color: en botones de color usa una sombra del mismo tono (por ejemplo violeta sobre un botón violeta) en vez de negro.
• Animar sombras en hover (por ejemplo, de Suave a Elevada) es un truco clásico para tarjetas clicables. Añade transition: box-shadow 0.2s ease;.
• En modo oscuro las sombras casi no se ven: ahí funciona mejor un borde sutil o un fondo un poco más claro.

Buena práctica

Define una escala de sombras en variables y úsala en todo el sitio, igual que haces con los colores:

:root {
  --sombra-1: 0 1px 3px rgba(0, 0, 0, 0.1);
  --sombra-2: 0 4px 12px rgba(0, 0, 0, 0.1);
  --sombra-3: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.tarjeta { box-shadow: var(--sombra-2); }
.tarjeta:hover { box-shadow: var(--sombra-3); }

Error común

box-shadow sigue la forma de la caja, no la del contenido. Si quieres sombra en la silueta de un PNG transparente o de un ícono, usa filter: drop-shadow(...) (lo encuentras en el generador de filtros).