Generador de Box Shadow CSS

Diseña sombras box-shadow con vista previa: desenfoque, expansión, interior.

Desplazamiento X: 0px

Desplazamiento Y: 4px

Desenfoque: 12px

Expansión: 0px

Opacidad: 10%

Interior

Vista previa

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

¿Buscas degradados o glassmorphism? Prueba nuestras herramientas dedicadas: Generador de Degradados CSS · Creador de Glassmorphism

Cómo funciona

Elige un efecto: box-shadow, degradado o glassmorphism.
Ajusta los controles y observa la vista previa en vivo actualizarse.
Afina colores, desenfoque, extensión y opacidad.
Copia el CSS generado.

Para qué se usa

Ajustar un box-shadow sin adivinar valores.
Construir un degradado visualmente y copiar el CSS.
Crear un efecto de tarjeta glassmorphism.

Bueno saberlo

Genera CSS estándar; algunos efectos (como el desenfoque backdrop-filter) dependen de la compatibilidad del navegador para el resultado final.
La vista previa muestra un solo elemento: pruébalo en tu maquetación real para ver el apilamiento y la interacción con el fondo.

Preguntas frecuentes

¿Qué efectos puedo generar?

Box-shadow, degradados lineales/radiales y glassmorphism, cada uno con una vista previa en vivo para que ajustes a ojo, no por prueba y error.

¿Funcionará el glassmorphism en todas partes?

Depende de backdrop-filter, compatible con la mayoría de navegadores modernos; los antiguos recurren a un fondo plano. Pruébalo en tus navegadores de destino.

¿Se sube algo?

No. El CSS se genera en vivo en tu navegador.

Herramientas relacionadas

Visor DXF

Paleta de Colores

Conversor de Color

Verificador de Contraste

Creador de Tarjetas Glass