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.
Una sombra cuenta la altura
En el diseño por capas la sombra no es decoración: dice cuánto está levantado un elemento respecto a la página. Una tarjeta apoyada tiene una sombra pequeña y estrecha, un menú abierto por encima de todo tiene una grande y difusa, y la diferencia entre las dos es lo que hace entender qué está encima de qué.
Por eso las sombras de una interfaz hay que elegirlas juntas, como una escala: dos o tres niveles fijos (apoyado, levantado, en primer plano) usados siempre igual. Una sombra distinta en cada elemento hace parecer la página desordenada aunque cada sombra por separado sea bonita.
Dos sombras son mejor que una
Las sombras convincentes son casi siempre dos superpuestas: una estrecha y oscura justo bajo el objeto, que define su contacto, y otra ancha y clarísima que se extiende alrededor. Así se comporta la luz real, con una sombra nítida cerca y una penumbra difusa lejos.
El error típico es una sola sombra muy oscura, que hace parecer el objeto pegado sobre un fondo gris. Las opacidades que funcionan están entre el 6 y el 20 %: parece poquísimo en la pantalla del diseñador, y ese es justamente el punto.
El color de la sombra no es el negro
Una sombra negra pura apaga los colores de debajo y sobre un fondo de color se ve sucia. La sombra realista toma el tono del fondo, más oscuro y más saturado: en una página azulada, un azul muy oscuro en lugar del negro cambia el resultado más que cualquier ajuste del radio de desenfoque.
Conviene recordar además que box-shadow no toca la maquetación: la sombra sale del recuadro sin empujar nada, y puede quedar recortada por un contenedor con el desbordamiento oculto. Si una sombra desaparece sin motivo, casi siempre es eso.
Herramientas cercanas
Para redondear las esquinas del mismo elemento está Generador de border-radius y para el fondo Generador de degradados CSS. El color de la sombra se elige con Selector de colores.