Saltar al contenido principal

Generador de Box Shadow CSS

Diseña sombras de caja multicapa visualmente y copia el CSS listo para usar.

Cómo Usarlo

  1. 1Elige un preajuste o una capa de sombra.
  2. 2Ajusta X/Y, desenfoque, extensión, color, opacidad e interior en la vista previa.
  3. 3Añade, duplica, elimina u ordena capas y copia la declaración o variable CSS.

Sobre esta herramienta

X desplaza horizontalmente e Y verticalmente. El desenfoque suaviza el borde; la extensión cambia el área base. Inset dibuja dentro y varias capas combinan profundidad y acentos. Ejemplo: box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .25);. Evita desenfoque excesivo, poco contraste y demasiadas capas.

Preguntas Frecuentes