Generador CSS box-shadow online y gratuito. Ajusta desplazamiento, desenfoque, extensión y color con vista previa en vivo. Copia el código. En el navegador.
Pulsa Ctrl+D para añadir esta página a marcadores
El generador de sombras CSS es una herramienta online gratuita que edita visualmente la propiedad box-shadow.
Sí, puedes añadir múltiples sombras para crear efectos complejos de profundidad. Cada sombra se ajusta individualmente.
Una sombra inset aparece dentro del elemento en vez de fuera. Mientras box-shadow normal aparece fuera, inset crea un efecto hundido.
Las sombras reales no son negras: son el color del fondo oscurecido, y se difuminan hacia los bordes. En vez de una sombra negra al 30 % muy marcada, superpón dos o tres capas tenues con radios de desenfoque distintos: por ejemplo una de 1 px pegada al borde, otra de 8 px detrás y una muy suave de 24 px más allá. Supón que la luz viene de arriba: da solo desplazamiento vertical y deja el horizontal en cero.
En una maqueta estática el coste es insignificante, pero cambia en cuanto lo animas. Hacer una transición del valor box-shadow al pasar el ratón obliga al navegador a recalcular el desenfoque en cada fotograma, lo que se nota como tirones en dispositivos modestos. Si necesitas una sombra que crezca al interactuar, anima en su lugar la opacidad o el transform de una capa de sombra ya dibujada: el resultado es mucho más fluido.