Generador de Box Shadow

¿Qué es la propiedad CSS box-shadow?

La propiedad box-shadow dibuja una o varias sombras alrededor del marco de un elemento. Cada sombra se define con un desplazamiento horizontal y vertical, un radio de desenfoque, un radio de extensión opcional, un color y la palabra clave opcional inset, que mueve la sombra al interior de la caja.

Las sombras sutiles y en capas dan profundidad a tarjetas, botones y modales, pero ajustar los números a mano es lento. Este generador te deja mover los controles, ver el efecto en una vista previa en vivo y copiar la declaración final directo a tu hoja de estilos.

Cómo crear una sombra de caja

1. Mueve los controles de desplazamiento, desenfoque y extensión hasta que la vista previa se vea bien. Baja la opacidad para una sombra más suave y natural.
2. Elige el color de la sombra, activa inset para una sombra interior y ajusta el radio de esquina y el fondo de la vista previa.
3. Copia el CSS generado y pégalo en tu regla.

Casos de uso comunes

• Tarjetas y paneles - separa las tarjetas del fondo con una sombra suave de baja opacidad.
• Botones - crea estados hover y presionado con distintos desplazamientos y una sombra interior.
• Modales y menús desplegables - distingue las capas flotantes del contenido inferior con un desenfoque mayor.