¿Odias los anuncios? Ir Sin publicidad Hoy 

Sombra de cajas en CSS Obtener resultados realistas sin pruebas y errores

Publicado el 2 de mayo de 2026

Sombra de cajas en CSS: resultados realistas sin ensayo y error 1

La sombra de caja es una de esas propiedades de CSS que parece simple hasta que te quedas mirando un resultado que parece arte de corte de 2008. La sintaxis es corta, pero lo que cada valor realmente hace — y cómo se interactúan — no es evidente. Aquí tienes cómo escribir sombras que parecen pensadas, no pegadas.

La sintaxis, desenmascarada

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

Cinco valores. Vamos a ser precisos con cada uno:

offset-x: A cuánto se desplaza la sombra horizontalmente. Un valor positivo la mueve a la derecha; un valor negativo la mueve a la izquierda.
offset-y: A cuánto se desplaza la sombra verticalmente. Un valor positivo la mueve hacia abajo.
blur-radius: Suaviza la sombra. En 0, el borde es duro. Valores más altos la suavizan hacia fuera aplicando un borde gaussiano a la forma de la sombra.
spread-radius: Amplía o contrae la sombra antes antes de que se aplique el borde. Un valor positivo la hace más grande que el elemento; un valor negativo la hace más pequeña.
color: El color de la sombra. Un error común es usar negro puro.
inset: Una palabra clave opcional que invierte la sombra hacia el interior del elemento.

Blur vs Spread: La confusión que arruina las sombras

Estos dos valores son la causa de la mayoría de los momentos en los que se pregunta "¿por qué se ve extraño?".

Blur hace que la sombra sea suave. Simula la difusión de la luz — cuanto más lejos del origen, más se extiende la sombra. Un blur-radius de 8px en un elemento pequeño se ve muy diferente que en uno grande.

Spread aumenta o disminuye la forma base de la sombra. Si estás tratando de crear la impresión de una sombra que está "lejos" y suave, aumentar el blur sin un valor negativo de spread significa que la sombra se extiende más allá de los límites del elemento, lo cual puede parecer inestable. Un pequeño valor negativo de spread lo acota de nuevo, de modo que el blur comience desde un pie de sombra más natural.

La combinación correcta suele ser un blur moderado con cero o un valor ligeramente negativo de spread. Así funcionan las sombras del mundo real: son más suaves a distancia, pero no se expanden más allá del objeto que las proyecta.

Hacer que las sombras se vean naturales

Tres reglas para sombras que parecen intencionadas:

1. No uses negro puro. Las sombras reales capturan el color ambiental. Un navy oscuro o un gris cálido oscuro en 0.10–0.15 de opacidad se lee como una sombra sin parecer una forma estampada. Prueba rgba(0, 0, 0, 0.12) como punto de partida, luego ajusta ligeramente el tono hacia el más cálido o más frío para que coincida con tu paleta.

2. Ajusta una única fuente de luz. Si las sombras van en direcciones diferentes en elementos distintos, la página se ve inconsistente. Elige una dirección — típicamente positiva offset-y (luz desde arriba) — y manténla en todo el sistema.

3. Mantén la opacidad baja. Una sombra con opacidad total se ve como un borde. Si puedes ver claramente un borde duro, entonces has ido demasiado opaco o has eliminado completamente el blur. Las sombras que parecen reales son sutiles — dan volumen, no un contorno.

Capas múltiples de sombras para dar profundidad

CSS permite capas separadas de sombras en un solo elemento. Aquí es donde obtienes verdadera profundidad sin artefactos visuales.

En lugar de una sola sombra grande, prueba dos: una sombra cercana compacta para el contacto, y una sombra difusa para la elevación.

box-shadow:
  0 2px 4px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.06);

La primera capa fija el elemento en la superficie. La segunda da la sensación de que flota sobre ella. Ninguna de las dos es "la sombra" por sí sola — juntas crean la ilusión de profundidad. Físicamente, esto imita cómo una fuente de luz fuerte cercana crea una sombra compacta bajo, mientras que la luz ambiental llena un halo más suave más lejos.

Sombra interna: cuando la luz cambia de dirección

El inset palabra clave dibuja la sombra dentro del borde del elemento en lugar de fuera. Los principales usos son:

Estado de botón presionado: Una sombra interna ligera en :active crea la sensación física de que está siendo presionado, como un clic real en un botón.
Profundidad del campo de entrada: Los campos de entrada y los textos se sienten internos respecto a la superficie con una sombra interna en la parte superior — un patrón que remonta a los diseños skeuomórficos pero que sigue siendo claro.

/* Pressed button */
button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Input field depth */
input {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
}

Rendimiento: cuándo usar filter: drop-shadow en lugar

box-shadow desencadena un repintado en cada cambio — no solo en el elemento, sino también en la capa pintada debajo de él. Para animaciones o interfaces con mucho desplazamiento, esto añade un costo medible.

filter: drop-shadow() funciona en el compositor de GPU y es significativamente más barata para sombras animadas. También sigue la forma realmente renderizada del elemento (incluso las áreas transparentes), mientras que box-shadow siempre sigue el rectángulo del modelo de caja.

La regla práctica: usa box-shadow para sombras estáticas en elementos de diseño. Usa filter: drop-shadow en elementos animados o en SVGs donde la sombra debe adaptarse a la forma visual en lugar del rectángulo de contorno.

Tokens de sombra para un sistema de diseño

Hardcodear valores de sombra por componente lleva a inconsistencias. Define un conjunto pequeño de tokens de elevación una vez, y referencia estos en todos lados.

:root {
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.04);

  --shadow-md:
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 12px rgba(0, 0, 0, 0.06);

  --shadow-lg:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);

  --shadow-xl:
    0 8px 16px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.06);

  --shadow-2xl:
    0 12px 24px rgba(0, 0, 0, 0.10),
    0 32px 80px rgba(0, 0, 0, 0.08);
}

Cada token utiliza el enfoque de dos capas: una sombra compacta para el contacto y una sombra difusa para la elevación. El borde y la opacidad aumentan a medida que la elevación crece — cuanto más lejos de la superficie, más suave y más extendida se vuelve la sombra.

Estos valores funcionan bien en fondos blancos y grises claros. En fondos oscuros, invierte la lógica — usa colores más claros y semitransparentes para sombras internas en lugar de colores oscuros para sombras proyectadas.

Salta la conjetura

Si estás iterando sobre valores de sombra — especialmente al superponer múltiples sombras o probando diferentes niveles de opacidad — una vista en tiempo real ahorra mucho tiempo. El Generador de Sombra Box CSS en IO Tools te permite ajustar todos los seis parámetros en tiempo real, superponer múltiples capas de sombra y copiar directamente el CSS generado. Útil para afinar nuevos tokens de diseño o validar que una sombra se vea correctamente antes de que llegue a producción.

La diferencia entre una sombra que parece diseñada y una que parece pegada suele reducirse a tres cosas: baja opacidad, un color que no sea negro puro, y dejar que el blur haga el trabajo que el spread nunca fue diseñado para hacer.