Generador de sombras CSS

Crea valores box-shadow con múltiples capas (sombra exterior o inset), offset, difuminado, expansión y color, con vista previa en vivo sobre un fondo y radio de borde configurables, y presets comunes. Comparte los mismos controles y el mismo conversor de color que el generador de degradados.

Procesamiento en tu dispositivo, sin IAhasta 8 capas de sombra

Capa 1

Interior (inset)

Offset X

Offset Y

Blur

Spread

Opacidad

Fondo de vista previa

Radio: 12px

1 capa(s) activa(s)

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

Los datos se procesan en tu dispositivo y no se envían al servidor.

Casos de uso

Crear una sombra elevada para una tarjeta
Generar una sombra interior para un campo de formulario
Combinar varias capas de sombra sutil

Cómo utilizar esta herramienta

Añade una o varias capas de sombra
Ajusta offset, difuminado y color de cada capa
Copia el CSS o descarga el archivo .css

Preguntas frecuentes

¿Puedo combinar varias sombras?

Sí. Puedes añadir varias capas, activarlas o desactivarlas y reordenarlas; el CSS final las combina separadas por comas en una sola propiedad box-shadow.

Herramientas relacionadas

Generador de degradados CSS

Verificador de contraste de colores WCAG

Extractor de paleta de colores

← Volver al inicio