Generador de box-shadow CSS
Mueve los deslizadores hasta que la sombra te convenza y copia la línea box-shadow. La vista previa muestra el resultado exacto.
CSS
box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.35);
Sobre esta herramienta
box-shadow admite cuatro longitudes: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque y extensión. El desenfoque suaviza el borde, la extensión agranda o encoge la sombra antes de desenfocarla, y una extensión negativa con un desplazamiento vertical positivo produce la elevación sutil de la mayoría de sistemas de diseño.
La palabra clave inset dibuja la sombra dentro de la caja en lugar de detrás: así se hacen los botones pulsados y los huecos interiores. El color suele ser negro con poca opacidad y no gris, porque una sombra translúcida mantiene su relación con lo que hay detrás.
Preguntas frecuentes
- ¿Por qué mi sombra se ve gris y plana?
- El gris sólido ignora el fondo. Usa negro con un 20-40% de opacidad y una extensión ligeramente negativa.
- ¿Puedo apilar varias sombras?
- Sí. Sepáralas con comas en tu hoja de estilos: genera aquí cada capa y únelas.
- ¿box-shadow afecta al diseño?
- No. Se pinta fuera de la caja de borde y nunca cambia el tamaño ni la posición, a diferencia de un borde.