Cómo funciona box-shadow
La propiedad box-shadow dibuja una o varias sombras alrededor de la caja de un elemento.
Cada sombra se escribe con este orden:
box-shadow: [inset] desplazamiento-x desplazamiento-y [desenfoque] [expansión] color;- Desplazamiento horizontal y vertical: cuánto se mueve la sombra hacia la derecha y hacia abajo. Con valores negativos va a la izquierda o hacia arriba.
- Desenfoque: cuanto mayor, más difuminado el borde. Con
0la sombra tiene el borde nítido. - Expansión: agranda o encoge la sombra antes de desenfocarla. Un valor negativo la mete por debajo del elemento.
- Color: casi siempre negro o el color del fondo con poca opacidad, por ejemplo
rgba(0, 0, 0, 0.2). inset: la sombra va por dentro del elemento, como si estuviera hundido.
Varias sombras en un mismo elemento
Las sombras se separan con comas y la primera queda por encima de las demás. Combinar una sombra corta y marcada con otra amplia y suave da un resultado mucho más natural que una sola sombra oscura: es lo que hacen los ejemplos Elevada y Por capas.
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 8px 24px rgba(0, 0, 0, 0.12);Sombras en imágenes: box-shadow o drop-shadow
box-shadow sigue la forma de la caja, incluido su border-radius, así que es lo que
necesitas para fotos y tarjetas. Si la imagen es un PNG o un SVG con fondo transparente y quieres que la sombra
siga el contorno del dibujo, usa el filtro drop-shadow():
img.logo { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); }drop-shadow() no admite expansión ni inset, y no se puede combinar con varias capas separadas por comas.
Consejos
- Usa opacidades bajas (entre 0,05 y 0,25): una sombra negra al 50 % casi nunca queda bien.
- Para una sombra solo por abajo, combina desplazamiento vertical con expansión negativa:
0 8px 6px -6px. - En modo oscuro las sombras apenas se ven: un borde sutil o un fondo algo más claro funcionan mejor.
- Para animar una sombra, anima la
opacityde un pseudoelemento que la lleve, no el propiobox-shadow: es mucho más fluido.