Generador de box shadow
Ajusta desplazamiento, desenfoque, extensión, color y opacidad con los deslizadores: la sombra se actualiza en tiempo real y el código CSS queda listo para copiar.
Cómo se lee la sintaxis de box-shadow
Los valores van siempre en el mismo orden: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque,
radio de extensión y color. Los desplazamientos mueven la sombra respecto al elemento, el desenfoque suaviza
su borde y la extensión agranda la sombra (o la encoge, con valores negativos) antes de aplicar el
desenfoque. Añadir la palabra clave inset lleva la sombra al interior de la caja:
práctico para efectos «hundidos» en campos de texto y botones pulsados.
Consejos para una sombra realista
Las sombras convincentes son sobre todo transparentes: mantén la opacidad entre el 10% y el 30% y aumenta el desenfoque en lugar de oscurecer el color. Deja el desplazamiento Y mayor que el X, porque en el mundo real la luz suele venir de arriba. Para más profundidad, superpón varias sombras separadas por comas: una pequeña y nítida cerca del elemento y otra grande y suave más lejos.