Imagen
100% en su navegador
Generador de Box Shadow — Herramienta Visual CSS box-shadow
Cree efectos CSS box-shadow visualmente. Ajuste desplazamiento, desenfoque, expansión, color y opacidad, apile varias sombras y copie el código. Vista previa en vivo, 100% en su navegador.
Código CSS
Generador de Box Shadow — Diseñe Sombras CSS Visualmente
Cree efectos CSS box-shadow perfectos con un editor visual en vivo. Arrastre los controles deslizantes para controlar el desplazamiento, el desenfoque, la expansión y el color, apile varias capas de sombra para dar profundidad, active sombras interiores y copie el CSS listo para usar. Se acabó adivinar los valores en píxeles.
Los cuatro valores de box-shadow
- Desplazamiento X: distancia horizontal — positivo mueve la sombra a la derecha, negativo a la izquierda
- Desplazamiento Y: distancia vertical — positivo hacia abajo, negativo hacia arriba
- Desenfoque: qué tan suave es el borde de la sombra (0 = nítido, alto = muy suave)
- Expansión: agranda (positivo) o reduce (negativo) el tamaño de la sombra
Funciones
- Vista previa en vivo: vea la sombra en un elemento de ejemplo al instante
- Color + opacidad: elija cualquier color y ajuste la transparencia
- Sombras interiores: cree sombras internas para efectos hundidos
- Capas múltiples: apile varias sombras para una profundidad realista
- Salida CSS limpia: copie una sola propiedad lista para pegar
Consejos para sombras realistas
- Las sombras reales suelen ser suaves — use un desenfoque generoso y baja opacidad (10–25%)
- Superponga dos o tres sombras (una ajustada oscura + una amplia suave) para profundidad natural
- Mantenga una dirección de luz consistente en toda su interfaz
- Lo sutil es mejor — las sombras pesadas se ven anticuadas
Privacidad
Esta herramienta funciona completamente en su navegador. Nada se sube ni se almacena.