Tool Hub

Generador de sombras

Apila múltiples capas box-shadow o filter:drop-shadow con vista previa en vivo

Apila múltiples capas de sombra para crear efectos de profundidad. Usa box-shadow para elementos sólidos (admite inset y spread) o filter:drop-shadow para formas transparentes (PNG, SVG). La vista previa en vivo se actualiza al ajustar cada capa.

Capas de sombra

Vista previa

CSS
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15);

Cómo usar

  1. Elija entre el modo box-shadow y drop-shadow usando el control segmentado.
  2. Ajuste desplazamiento X, desplazamiento Y, desenfoque, extensión y color de la primera capa de sombra.
  3. Haga clic en '+ Capa' para apilar múltiples sombras y configurar cada una de forma independiente.
  4. Vea previamente el efecto combinado en la caja de vista previa de sombra en vivo.
  5. Copie la declaración CSS generada de la sección de salida y péguelo en su hoja de estilos.

Ejemplos

  • Establecer offsetY=4, desenfoque=12, extensión=0, color=rgba(0,0,0,0.15) produce una sombra de tarjeta estándar: box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15).
  • Agregar una segunda capa con offsetY=1, desenfoque=3 y color=rgba(0,0,0,0.08) crea un efecto de profundidad en capas popular en UI de tipo material.

Verifica las salidas antes de usar en producción. Sin garantía — ver Términos.