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

[Canonical HTML page](https://gradiently.design/es/guide/css-box-shadow)

Una sola box-shadow gris es la forma más rápida de que una interfaz parezca una plantilla. Las sombras reales son varias sombras a la vez, teñidas y más discretas de lo que crees.

## The short version

- La propiedad box shadow de CSS admite una palabra clave inset opcional, dos desplazamientos, un radio de desenfoque, un radio de expansión y un color.
- Una sola box shadow parece artificial porque los objetos reales proyectan a la vez una sombra de contacto nítida y otra amplia y suave.
- Superponer de tres a cinco sombras, cada una con aproximadamente el doble de desplazamiento y desenfoque que la anterior y poca opacidad, produce una sombra suave y creíble.
- Teñir la sombra hacia el tono del fondo se ve más natural que el negro puro sobre superficies de color o cálidas.
- Animar box-shadow obliga a repintar en cada fotograma, así que es mejor desvanecer la opacidad de un pseudoelemento que lleve la sombra grande.

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

```css
/* 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); }
```

La sombra siempre sigue al `border-radius`, por eso una sombra solo con expansión crea un filete redondeado limpio sin cambiar la maquetación.

| Valor | Por defecto | Efecto |
| --- | --- | --- |
| `inset` | Desactivado | Dibuja la sombra dentro del borde en lugar de fuera |
| Desplazamiento x e y | Obligatorio | Mueve la sombra. La luz desde arriba implica una y positiva |
| Desenfoque | 0 | Suaviza el borde. Los valores más altos extienden más el difuminado |
| Expansión | 0 | Agranda o encoge la sombra antes de desenfocarla. En negativo la recoge |
| Color | `currentcolor` | Usa un color con alfa; las sombras opacas parecen pegatinas |

La expansión es el valor que más gente se salta y el que más arregla. Una pequeña expansión negativa evita que un desenfoque grande se escape por los lados.

## 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.

### Sombra única

- Un desenfoque medio en negro al 25 por ciento
- Un halo gris alrededor de toda la tarjeta
- Cuesta saber a qué altura flota la tarjeta
- Se ve sucia sobre fondos de color

### Sombra por capas

- Cuatro sombras, cada una más tenue y más amplia
- Densa cerca del borde, ligera a lo lejos
- La altura se lee de un vistazo
- Teñida para asentarse con naturalidad en su superficie

## 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. **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. **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. **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. **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.

```css
: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); }
```

Una escala de elevación de tres pasos como propiedades personalizadas. Cambia `--shadow-color` una vez y todas las sombras del sistema lo siguen.

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](https://gradiently.design/es/guide/css-custom-properties-theming) y [tokens de diseño](https://gradiently.design/es/guide/design-tokens) 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.

| Nivel | Token | Úsalo para |
| --- | --- | --- |
| 0 | ninguno, o un filete de 1px de expansión | Campos, filas de tabla, tarjetas planas sobre una página teñida |
| 1 | `--shadow-sm` | Tarjetas en reposo, botones que deben invitar a pulsarse |
| 2 | `--shadow-md` | Tarjetas al pasar el cursor, menús desplegables, popovers |
| 3 | `--shadow-lg` | Diálogos, paneles, todo lo que va sobre una página atenuada |

Cuatro niveles cubren casi cualquier interfaz. Con más, la gente deja de poder distinguirlos.

## 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.

- Página menta: #f0fdfa
- Sombra verde azulado: #134e4a
- Página lila: #faf5ff
- Sombra ciruela: #3b0764
- Página crema: #fdf6ec
- Sombra tierra: #451a03

Tres colores de página, cada uno con el color de sombra que le va. Usa los tonos de sombra al 5 o 10 por ciento por capa.

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](https://gradiently.design/es/guide/dark-mode-design) repasa los colores de superficie. Para paneles que flotan sobre imágenes, un [backdrop filter](https://gradiently.design/es/guide/css-blur-background) 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.

```css
.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; }
}
```

Las dos sombras se pintan una sola vez. Al pasar el cursor solo cambia la opacidad, así que no se repinta nada durante la transición.

Hay más sobre lo que cuesta tiempo de pintado en [rendimiento de los degradados CSS](https://gradiently.design/es/guide/css-gradient-performance), y el mismo enfoque por capas sirve para los botones en [botones con degradado en CSS](https://gradiently.design/es/guide/css-gradient-button).

## 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.

## FAQ

### ¿Cuáles son los valores de box-shadow en CSS?

Un `inset` opcional, un desplazamiento horizontal, uno vertical, un radio de desenfoque, un radio de expansión y un color, por ejemplo `0 4px 12px 0 rgb(0 0 0 / 0.15)`.

### ¿Cómo hago una box shadow suave en CSS?

Superpón de tres a cinco sombras, duplicando el desplazamiento y el desenfoque cada vez, con un 5 a 10 por ciento de opacidad cada una. Tíñelas hacia el color del fondo.

### ¿Cómo añado más de una box shadow?

Sepáralas con comas en una sola declaración `box-shadow`. La primera sombra de la lista se dibuja encima.

### ¿Qué hace la expansión en box-shadow?

Agranda o encoge la sombra antes de desenfocarla. Una expansión negativa evita que un desenfoque grande se vea por los lados de la caja.

### ¿Animar box-shadow es malo para el rendimiento?

Repinta en cada fotograma. Pon la sombra del estado hover en un pseudoelemento y anima su opacidad en su lugar.