Qué es la propiedad box-shadow
box-shadow es la propiedad de CSS que dibuja una o varias sombras alrededor (o dentro) de un elemento. Es lo que da sensación de profundidad a tarjetas, botones, menús y ventanas modales: una capa parece flotar sobre la página porque proyecta una sombra creíble. Este generador te deja mover cada parámetro con un slider, ver el resultado en una caja de prueba al instante y copiar el código listo para pegar en tu hoja de estilos, sin instalar nada y sin que ningún dato salga de tu navegador.
Cómo usar el generador
- Ajusta los sliders de la sombra: desplazamiento X, desplazamiento Y, desenfoque, extensión y opacidad.
- Elige el color de la sombra y, si quieres, cambia el fondo y el color de la caja de prueba para juzgar el contraste real.
- Marca Interior (inset) para que la sombra caiga dentro del elemento.
- Pulsa Añadir sombra para apilar varias capas, o toca un botón de Nivel para cargar una elevación tipo Material.
- Copia el bloque
box-shadowcon el botón Copiar.
Qué hace cada parámetro
La sintaxis es box-shadow: X Y desenfoque extensión color, con inset opcional al inicio. Cada valor cambia una cosa concreta:
| Parámetro | Qué controla | Detalle |
|---|---|---|
| Desplazamiento X | Movimiento horizontal | Positivo = a la derecha; negativo = a la izquierda |
| Desplazamiento Y | Movimiento vertical | Positivo = hacia abajo; negativo = hacia arriba |
| Desenfoque (blur) | Suavidad del borde | 0 = borde nítido; más alto = más difusa |
| Extensión (spread) | Tamaño de la sombra | Positivo la agranda; negativo la encoge |
| Color y opacidad | Tinte y transparencia | Una opacidad baja imita la luz real |
El desenfoque nunca es negativo. La extensión sí acepta valores negativos, y son muy útiles: una sombra con extensión negativa se recoge por dentro y evita el típico halo gris demasiado ancho.
Ejemplo resuelto
Queremos la sombra suave de una tarjeta. Ponemos X en 0 (la luz cae recta desde arriba), Y en 10 para bajarla un poco, desenfoque en 20 para difuminar el borde, extensión en 0 y un color negro con solo 25% de opacidad. El generador escribe:
box-shadow: 0px 10px 20px 0px rgba(17, 24, 39, 0.25);
Ese rgba es la clave: en vez de un gris sólido, usamos negro casi transparente, así la sombra se mezcla con cualquier fondo. Si la caja se ve demasiado pegada al suelo, subimos Y y el desenfoque a la vez; si se ve sucia, bajamos la opacidad.
Sombras múltiples y elevación
Una sola sombra se ve plana. Los sistemas de diseño como Material apilan dos capas: una cercana y marcada que define el borde del objeto, y otra lejana y difusa que simula la luz ambiental. Al separar ambas con comas obtienes un efecto de elevación mucho más natural. Los botones de Nivel de esta herramienta cargan justo esas parejas, de la elevación más baja (un chip) a la más alta (un diálogo despegado de la página). A mayor nivel, más grandes son el desplazamiento Y y el desenfoque, porque los objetos “más altos” proyectan sombras más largas y suaves.
Preguntas frecuentes
¿Cómo hago una sombra suave y sutil?
Mantén el desplazamiento X en 0, usa un Y pequeño (entre 4 y 12), un desenfoque generoso (20 a 40) y sobre todo una opacidad baja: 15% a 30%. El error más común es usar negro sólido; una sombra creíble siempre es semitransparente.
¿Qué hace la opción inset?
Con inset la sombra se pinta hacia dentro del elemento en lugar de hacia fuera, como si estuviera hundido. Sirve para campos de formulario, casillas presionadas o zonas rebajadas. Puedes combinar una sombra normal y una inset en el mismo elemento sumándolas.
¿Puedo aplicar varias sombras a la vez?
Sí. Separa cada sombra con una coma y el navegador las dibuja en orden: la primera queda encima. Combinar dos o tres capas con distintos desenfoques es la técnica estándar para lograr profundidad realista y bordes limpios.