Generador de Box Shadow CSS

¿Qué es CSS box-shadow?

La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento. Las sombras son una herramienta fundamental para crear profundidad, elevación y jerarquía visual en diseño web. Una sombra bien elaborada puede hacer que una tarjeta parezca flotar sobre la página o dar a un botón un aspecto presionado.

Box-shadow acepta múltiples parámetros: desplazamiento horizontal, desplazamiento vertical, radio de blur, radio de spread y color. También puedes añadir la palabra clave inset para crear sombras internas. Se pueden apilar múltiples sombras en un solo elemento separándolas con comas, y se renderizan de atrás hacia adelante.

Desglose de la sintaxis box-shadow

La sintaxis completa es: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Los valores offset-x y offset-y son obligatorios y definen la posición de la sombra respecto al elemento. Valores positivos mueven la sombra a la derecha y abajo. blur-radius suaviza los bordes: un valor de 0 crea una sombra nítida. spread-radius expande o reduce la sombra: valores negativos crean una sombra más ajustada.

Cómo usar esta herramienta

Ajusta los deslizadores para desplazamiento horizontal, desplazamiento vertical, blur, spread y color. La vista previa se actualiza en tiempo real para que veas exactamente cómo se verá la sombra. Activa la opción inset para sombras internas. Añade múltiples capas de sombra para efectos de profundidad más realistas. Cuando estés satisfecho, copia el código CSS generado.

Consejos para sombras eficaces

• Usa sombras sutiles con baja opacidad para una apariencia limpia, moderna y elevada.
• Apila múltiples sombras para una profundidad más realista: una sombra cercana nítida más una sombra difusa suave imita la iluminación del mundo real.
• Un blur mayor con un ligero desplazamiento crea un efecto flotante suave ideal para tarjetas y modales.
• Spread negativo crea una sombra más ajustada y enfocada útil para bordes sutiles.
• Mantén la dirección de las sombras consistente en toda tu página: fuentes de luz inconsistentes parecen poco naturales.

Sistema de elevación de Material Design

Material Design de Google define niveles de elevación de 0dp a 24dp, cada uno con valores específicos de sombra. Una mayor elevación significa valores mayores de blur y desplazamiento. Este sistema garantiza una jerarquía visual consistente en una aplicación. Aunque no sigas Material Design, el principio de usar niveles de elevación consistentes es valioso para cualquier sistema de diseño.

Impacto en el rendimiento

Las sombras de caja están aceleradas por GPU en navegadores modernos y tienen un impacto mínimo en el rendimiento para uso típico. Sin embargo, radios de blur muy grandes (50px+) en muchos elementos simultáneamente pueden causar caídas de fotogramas durante animaciones. Si necesitas animar sombras, considera usar transform: scale() para hacer crecer un pseudo-elemento con una sombra estática en lugar de animar los valores de sombra directamente.

Preguntas frecuentes

¿Cuál es la diferencia entre box-shadow y drop-shadow?

box-shadow se aplica a la caja rectangular del elemento, incluidos relleno y borde. La función filter: drop-shadow() sigue la forma real del elemento, incluidas regiones transparentes en imágenes. Usa drop-shadow para elementos no rectangulares como iconos o imágenes PNG con transparencia.

¿Puedo usar box-shadow para crear bordes?

Sí. Un box-shadow con blur cero y un spread positivo actúa como un borde que no afecta al diseño. Esta técnica es útil cuando necesitas un borde visual sin cambiar las dimensiones del elemento, por ejemplo durante estados hover.