ASAPUtils Logo ASAPUtils

Generador de Sombra de Caja CSS

Genera y previsualiza sombras de caja CSS complejas con este constructor visual interactivo. Crea sombras en capas, sombras internas y copia el código CSS exacto al instante.

100% private — this runs entirely in your browser and nothing is uploaded.

Shadow Layers

Shadow 1
10px
10px
20px
0px
20%

CSS Code

box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2);

¿Qué es el Generador de Sombras en CSS?

El Generador de Sombras en CSS es una herramienta visual e interactiva para desarrolladores y diseñadores web que permite crear efectos de sombra complejos sin escribir código manualmente. Puedes ajustar propiedades como el desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y color para ver los cambios en tiempo real.

Cómo Usar

  1. Ajustar Controles: Utiliza los deslizadores para cambiar el desplazamiento en X, desplazamiento en Y, radio de desenfoque, expansión y color de la sombra.
  2. Añadir Capas: Los diseños modernos suelen usar múltiples sombras superpuestas para lograr un efecto más suave. Haz clic en “Añadir sombra” para superponer otro efecto.
  3. Alternar Interna: Marca la casilla “Interna” para que la sombra se proyecte hacia adentro en lugar de hacia afuera.
  4. Copiar Código: Una vez que estés satisfecho con la vista previa, haz clic en el botón de copiar para obtener el código CSS final para tu proyecto.

¿Por qué Usar Sombras en Capas? Superponer múltiples sombras de caja con diferentes opacidades y desenfoques puede crear una profundidad mucho más suave y natural en comparación con una sombra única y fuerte. Esta herramienta facilita visualizar esas capas antes de aplicarlas a tu hoja de estilos.