Box shadow en CSS: sombras suaves por capas que parecen reales

Una box shadow en CSS se escribe box-shadow: 0 4px 12px rgb(0 0 0 / 0.15): un desplazamiento horizontal, uno vertical, un radio de desenfoque, una expansión opcional y un color. Esa sombra única vale para un prototipo rápido, pero rara vez parece real. Las sombras que convencen al ojo van por capas: varias sombras en un mismo elemento, cada una más grande y más tenue que la anterior, teñidas para encajar con la superficie de debajo.

Sintaxis de box-shadow

/* inset? | offset-x | offset-y | blur | spread | color */
.card { box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15); }

/* Negative spread tucks the shadow under the box */
.card { box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.25); }

/* Inset: a shadow inside the box, like a pressed well */
.well { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.12); }

/* Spread only: a hairline that follows border-radius */
.chip { box-shadow: 0 0 0 1px rgb(15 23 42 / 0.08); }

/* Several shadows, comma separated, first on top */
.card { box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.08); }

Por qué una sola sombra parece falsa

Pon un libro sobre una mesa y mira su sombra. Justo en el borde donde toca, la sombra es oscura y nítida. Más lejos se vuelve amplia y tenue, porque la luz rodea el objeto desde muchas direcciones. Una box-shadow solo puede ser una de esas cosas a la vez: ceñida y dura, o amplia y difusa. En ambos casos el ojo nota que falta algo.

Cómo superponer box shadows

El método es sencillo: empieza pequeño y nítido y duplica el desplazamiento y el desenfoque en cada capa extra, manteniéndolas todas tenues. Las opacidades se suman donde las capas se solapan, así que los valores individuales pueden ser sorprendentemente bajos.

1. 1

   Empieza con una sombra de contacto

   0 1px 1px con un 8 por ciento de opacidad más o menos. Es la línea oscura justo bajo el borde.

2. 2

   Duplica en cada capa

   Después 0 2px 2px, 0 4px 4px, 0 8px 8px. El desplazamiento y el desenfoque crecen juntos, así que la luz parece venir de arriba.

3. 3

   Mantén tenue cada capa

   Entre el 5 y el 10 por ciento cada una. Si el resultado se ve pesado, quita la capa más grande antes de oscurecer nada.

4. 4

   Tiñe el color

   Sustituye el negro por una versión profunda del tono del fondo, como un azul marino en páginas azules o un marrón sobre crema.

:root {
  /* Shadow colour as channels, so opacity can vary per layer */
  --shadow-color: 222 47% 11%;

  --shadow-sm:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.06);

  --shadow-md:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.05);

  --shadow-lg:
    0 1px 1px hsl(var(--shadow-color) / 0.07),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.06),
    0 16px 16px hsl(var(--shadow-color) / 0.05),
    0 32px 32px hsl(var(--shadow-color) / 0.04);
}

.card { box-shadow: var(--shadow-md); }
.dialog { box-shadow: var(--shadow-lg); }

Guardar las sombras como variables las convierte en tokens de diseño, lo que mantiene coherentes todas las tarjetas, menús y diálogos. Variables CSS para temas y tokens de diseño muestran cómo conectarlas a un tema completo.

Una escala de elevación para una interfaz

La sombra es una señal de altura, así que debería significar lo mismo en todas partes. Elige tres o cuatro niveles y asígnalos a funciones. Lo que flota más alto recibe una sombra más grande y más suave, nunca solo una más oscura.

Sombras sobre fondos de color y oscuros

Las sombras negras puras se vuelven grises y turbias sobre una superficie de color, igual que el negro mezclado en la pintura la apaga. Toma el color de la sombra del fondo: una sombra verde azulado profundo en una página menta, un ciruela oscuro en una lila. En fondos degradados, elige la parada más oscura del degradado y úsala con poca opacidad.

En modo oscuro las sombras casi desaparecen, porque hay poca luz que puedan bloquear. Muestra la altura haciendo las superficies elevadas algo más claras y mantén un filete tenue en el borde. Diseño en modo oscuro repasa los colores de superficie. Para paneles que flotan sobre imágenes, un backdrop filter suele separar las capas mejor que una sombra más pesada.

Animar box-shadow sin tirones

Cambiar box-shadow al pasar el cursor obliga al navegador a repintar la sombra en cada fotograma de la transición. En un botón no pasa nada. En una cuadrícula de cincuenta tarjetas, va a tirones. La solución estándar es poner la sombra grande en un pseudoelemento y desvanecer su opacidad, algo que el navegador puede componer con poco coste.

.card {
  position: relative;
  box-shadow: var(--shadow-sm);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card::after { transition: none; }
}

Hay más sobre lo que cuesta tiempo de pintado en rendimiento de los degradados CSS, y el mismo enfoque por capas sirve para los botones en botones con degradado en CSS.

Cuándo prescindir de la sombra

Las sombras separan una superficie de lo que tiene detrás. Si el fondo es un degradado rico o una fotografía, una sombra fuerte se pelea con él. A menudo un fondo más tranquilo hace más por la tarjeta que cualquier sombra. Los Marks de Gradiently están hechos para eso: cada uno es un fondo vivo con sus propios colores, luz y grano, y las palabras que colocas encima siguen siendo legibles porque el Mark se calma detrás de ellas, sin cajas ni sombras que hagan el trabajo.