Generador de sombras CSS box-shadow

Cómo se usa

1. Ajusta el desplazamiento horizontal y vertical. Los valores positivos mueven la sombra a la derecha y hacia abajo.
2. Regula el desenfoque, la expansión, el color y la opacidad.
3. Marca Inset para una sombra interior o pulsa Añadir capa para apilar otra.
4. Pulsa Copiar y pega la regla en tu hoja de estilos.

Qué significa el resultado

El valor por defecto es box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);: sin desplazamiento horizontal, 4px hacia abajo, 12px de desenfoque, sin expansión y negro al 25 % de opacidad. En CSS el alfa se escribe con punto, 0.25. Con varias capas, los valores van separados por comas, y los ceros se escriben sin unidad.

Ejemplo

Una tarjeta con una sombra cercana y otra amplia y suave: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 8px 24px 0 rgba(0, 0, 0, 0.15), la primera capa al 20 % de opacidad y la segunda al 15 %.

Consejos

• Mantén la opacidad baja, normalmente entre el 10 y el 30 %, para un aspecto natural.
• La sombra no cambia el diseño del elemento, pero un contenedor con overflow: hidden puede recortarla.
• Una expansión negativa con un desenfoque mayor da una sombra que aparece solo por un lado.