Como crear box-shadow en CSS: guia completa con generador visual gratis

La propiedad box-shadow agrega sombras a elementos HTML. Sintaxis completa:

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

Parametros:

• offset-x: Desplazamiento horizontal. Positivo = derecha, negativo = izquierda.
• offset-y: Desplazamiento vertical. Positivo = abajo, negativo = arriba.
• blur-radius: Cuanto se difumina la sombra. 0 = bordes nitidos.
• spread-radius: Cuanto se expande o contrae la sombra. Positivo = mas grande, negativo = mas pequena.
• color: Color de la sombra. Usa rgba() para transparencia.
• inset: Opcional. Hace la sombra interior en vez de exterior.

Crea sombras visualmente con el generador de box-shadow de NexTools.

El generador visual de NexTools:

Paso 1: Ajusta los sliders de offset-x, offset-y, blur y spread.

Paso 2: Selecciona el color de la sombra con transparencia.

Paso 3: Ve el resultado en tiempo real en la previsualizacion.

Paso 4: Copia el codigo CSS generado con un clic.

Puedes agregar multiples sombras para efectos avanzados. Complementa con el generador de gradientes para fondos.

Sombra sutil (material design):

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

Sombra media (cards):

box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);

Sombra fuerte (elevacion alta):

box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

Sombra neon/glow:

box-shadow: 0 0 20px rgba(99,102,241,0.5);

Sombra interior (inset):

box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);

Borde sombra (sin blur):

box-shadow: 0 0 0 3px rgba(99,102,241,0.5);

CSS permite multiples sombras separadas por comas:

box-shadow:
  0 1px 3px rgba(0,0,0,0.12),
  0 1px 2px rgba(0,0,0,0.24);

Efecto de elevacion Material Design: Google define 5 niveles de elevacion, cada uno con 2-3 sombras superpuestas para un resultado realista.

Efecto neumorfismo:

box-shadow:
  8px 8px 16px #d9d9d9,
  -8px -8px 16px #ffffff;

Requiere fondo gris claro (#e0e0e0) para funcionar correctamente.

Combina sombras con colores del conversor de colores de NexTools.

box-shadow: Sombra rectangular alrededor del box model del elemento. No sigue la forma del contenido (un elemento circular con box-shadow tiene sombra rectangular si no tiene border-radius).

filter: drop-shadow(): Sigue la forma real del elemento, incluyendo transparencia de PNG. Ideal para iconos y formas irregulares. filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));

text-shadow: Solo para texto. text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

Cuando usar cada una:

• Cards, botones, contenedores → box-shadow
• Iconos PNG con transparencia → drop-shadow
• Texto con efecto visual → text-shadow

Las sombras CSS son renderizadas por la GPU pero pueden afectar el rendimiento:

Sombras costosas:

• Blur muy alto (50px+) en muchos elementos simultaneos
• Sombras animadas (cambiar box-shadow causa repaint)
• Muchos elementos con sombras en scroll (lista de 100+ cards)

Optimizaciones:

• Anima transform en vez de box-shadow para hover: mueve un pseudo-elemento con sombra usando translateY
• Usa will-change: transform para elementos que se animan
• Para listas largas, aplica sombras solo a elementos visibles (Intersection Observer)

Las sombras clasicas (negro sobre blanco) no funcionan en dark mode:

Problema: rgba(0,0,0,0.1) sobre fondo oscuro es invisible.

Solucion 1: Sombras mas oscuras. Usa rgba(0,0,0,0.3-0.5) en dark mode.

Solucion 2: Sombras de color. Usa el color del elemento atenuado: rgba(99,102,241,0.3).

Solucion 3: Bordes sutiles. En dark mode, a menudo un borde de 1px funciona mejor que sombras: border: 1px solid rgba(255,255,255,0.1);

Variables CSS para ambos modos:

:root { --shadow: 0 4px 6px rgba(0,0,0,0.1); }
.dark { --shadow: 0 4px 6px rgba(0,0,0,0.4); }

Tailwind incluye utilidades de sombra predefinidas:

• shadow-sm → 0 1px 2px rgba(0,0,0,0.05)
• shadow → 0 1px 3px rgba(0,0,0,0.1)
• shadow-md → 0 4px 6px rgba(0,0,0,0.1)
• shadow-lg → 0 10px 15px rgba(0,0,0,0.1)
• shadow-xl → 0 20px 25px rgba(0,0,0,0.1)
• shadow-2xl → 0 25px 50px rgba(0,0,0,0.25)
• shadow-inner → inset 0 2px 4px rgba(0,0,0,0.05)
• shadow-none → ninguna sombra

Para sombras personalizadas en Tailwind: shadow-[0_4px_20px_rgba(0,0,0,0.15)] (arbitrary values).

Consulta tambien nuestra guia sobre gradientes CSS.