Generador de Sombras CSS

Referencia

¿Qué es CSS box-shadow?

La propiedad CSS box-shadow añade uno o más efectos de sombra alrededor del marco de un elemento. Se define por desplazamientos relativos al elemento, radios de desenfoque y expansión, color y una palabra clave inset opcional. Múltiples sombras se separan con comas y se renderizan de adelante hacia atrás.

Sintaxis de box-shadow

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x: Distancia horizontal. Positivo = derecha, negativo = izquierda.
offset-y: Distancia vertical. Positivo = abajo, negativo = arriba.
blur-radius (opcional, defecto 0): Valores mayores producen una sombra más suave y difusa.
spread-radius (opcional, defecto 0): Valores positivos expanden la sombra, negativos la encogen.
inset (opcional): Mueve la sombra al interior del elemento.

Uso de múltiples capas de sombra

Combinar múltiples sombras crea efectos de profundidad realistas. Una técnica común es combinar una sombra ajustada y oscura cerca del elemento (para definición) con una sombra grande y tenue más alejada (para profundidad). Material Design y los sistemas de diseño modernos usan sombras en capas para comunicar elevación.

Consejos de diseño para sombras

Usa colores rgba() o hsla() — las sombras semitransparentes se ven más naturales que las opacas. Una sombra con rgba(0,0,0,0.15) se ve más realista que #000.
Mantén consistente la fuente de luz — usa la misma dirección de desplazamiento en toda tu interfaz.
Evita el negro puro — usa un tono oscuro de tu color de marca para sombras más suaves y coherentes.
Rendimiento — box-shadow provoca operaciones de repintado. Para elementos animados, prefiere filter: drop-shadow().

Privacidad

Toda la generación de sombras se ejecuta 100% en tu navegador. No se envían datos a ningún servidor.