Diseña sombras CSS con vista previa en vivo.
El Generador de Box Shadow CSS es una herramienta visual que crea la propiedad box-shadow con controles deslizantes para cada valor: desplazamiento horizontal (X), vertical (Y), desenfoque (blur), expansión (spread), color y modo interior (inset). La vista previa muestra el efecto en vivo y el código se copia con un clic. Ideal para tarjetas, botones, modales y elementos UI con profundidad.
blur suaviza los bordes y difumina la sombra. spread la expande en todas direcciones antes del desenfoque — positivo agranda, negativo reduce.
La sombra normal aparece fuera y sugiere elevación; inset aparece dentro y sugiere profundidad o hundimiento.
Un negro al 15-25% se ve más natural que negro puro. La herramienta añade opacidad 40 automáticamente.
Sí — CSS acepta múltiples valores separados por comas, por ejemplo una externa suave con una interna nítida.
Sombras grandes con blur alto pueden ralentizar animaciones. Prefiere transform: scale a box-shadow animado.