Generador de sombras CSS

Sombras calibradas para productos listos para producción

Ajusta cada parámetro de box-shadow con la precisión que exige un equipo de frontend. Define modos inset, superficies, neumorfismo y radios sin abandonar el navegador, asegurando consistencia entre diseño y desarrollo.

Control vectorial: Modifica offsets, blur y spread con sliders precisos y previsualiza el resultado en un lienzo oscuro que replica entornos reales.
Soporte para neumorfismo: Activa pares de luces y sombras balanceadas para tarjetas o componentes táctiles sin memorizar fórmulas complejas.
Documentación inmediata: Exporta el bloque CSS completo con valores de color y radio listos para tus guías de estilo o repositorios de componentes.

Box Shadow Studio

Sombras consistentes listas para producción

NeomorfismoInsetOffset X (16px)Offset Y (18px)Spread (-4px)Blur (30px)Opacidad sombra (0.38)Radius (20px)

Color sombra

Color superficie

Salida CSS

background: #d4dbe4;
border-radius: 20px;
box-shadow: 16px 18px 30px -4px rgba(18, 48, 82, 0.38);

Buenas prácticas para diseñar sombras útiles

Probar diferentes superficies

Combina el color de superficie con la intensidad de la sombra para simular tarjetas claras, dashboards oscuros o layouts mixtos.

Verificar accesibilidad

Utiliza el modo inset para validar estados de foco y campos activos donde la sombra influye en la percepción del usuario.

Guardar presets

Copia los valores preferidos en tu colección personal y reutilízalos como tokens en tu librería de componentes.