Docs ejecutables de CSS: Box-shadow

Q: ¿Cuál es la sintaxis de box-shadow?

box-shadow: offset-x offset-y blur spread color;, por ejemplo box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Solo los dos desplazamientos son obligatorios; agrega inset para dibujar la sombra dentro de la caja.

Cómo funciona box-shadow

box-shadow pinta una sombra alrededor de la caja de borde de un elemento. Sigue border-radius, no ocupa espacio en el layout y necesita al menos dos valores: cuánto moverla en horizontal y en vertical.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 16px; }
    .row { display: flex; gap: 24px; flex-wrap: wrap; }
    .card {
      width: 150px; padding: 20px 12px; text-align: center;
      background: white; border-radius: 10px; font-size: 14px;
    }
    .hard { box-shadow: 6px 6px 0 #111827; }
    .soft { box-shadow: 0 4px 12px rgb(0 0 0 / 15%); }
    .inset { box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="card hard">6px 6px 0 #111827</div>
    <div class="card soft">0 4px 12px, 15% black</div>
    <div class="card inset">inset 0 2px 6px</div>
  </div>
</body>
</html>

La sintaxis

box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] [<color>];

Valor	Significado	Por defecto
`inset`	Dibuja la sombra dentro de la caja, como una zona hundida	Fuera
offset-x	Positivo mueve a la derecha, negativo a la izquierda	Obligatorio
offset-y	Positivo mueve hacia abajo, negativo hacia arriba	Obligatorio
blur	Qué tan suave es el borde; no puede ser negativo	`0` (un borde nítido)
spread	Agranda (positivo) o encoge (negativo) la sombra	`0`
color	Cualquier color; un negro semitransparente suele verse mejor	El color del texto

La cantidad de longitudes decide su significado: dos son los desplazamientos, tres agregan el desenfoque y cuatro agregan el spread. Pruébalo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      width: 160px; height: 90px; margin: 32px;
      background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
    }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>box-shadow: <input id="val" value="0 10px 20px -5px rgb(37 99 235 / 50%)" size="36"></label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.boxShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(box).boxShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Prueba 0 0 0 4px #f59e0b (un anillo), inset 0 0 12px #2563eb y -8px -8px 0 #16a34a.

Spread: anillos y sombras de un solo lado

El spread cambia el tamaño de la sombra antes de desenfocarla. De ahí salen dos patrones:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spread</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
    .box { width: 140px; padding: 18px 10px; text-align: center; background: white; border: 1px solid #e5e7eb; font-size: 14px; }
    .ring { box-shadow: 0 0 0 4px #2563eb; border-radius: 8px; }
    .double { box-shadow: 0 0 0 3px white, 0 0 0 6px #16a34a; border-radius: 8px; }
    .bottom { box-shadow: 0 10px 8px -8px rgb(0 0 0 / 50%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="box ring">4px ring</div>
    <div class="box double">gap then ring</div>
    <div class="box bottom">bottom only</div>
  </div>
</body>
</html>

Un anillo: sin desplazamiento, sin desenfoque, solo spread. A diferencia de un borde, no cambia el tamaño del elemento, así que es un buen indicador de foco (:focus-visible { box-shadow: 0 0 0 3px #2563eb; }).
Un anillo con separación: apila un spread blanco debajo de uno de color más grande.
Un solo lado: mueve la sombra hacia abajo y achícala con un spread negativo, para que solo asome por abajo.

Sombras en capas para una profundidad realista

Las sombras reales tienen una parte oscura y nítida cerca del objeto y una parte suave y tenue más lejos. Dos o tres capas lo imitan mucho mejor que un solo desenfoque grande:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Elevation</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 24px 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; }
    .card { width: 140px; padding: 24px 10px; text-align: center; background: white; border-radius: 12px; font-size: 14px; }
    .one { box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
    .layered {
      box-shadow:
        0 1px 2px rgb(0 0 0 / 12%),
        0 4px 8px rgb(0 0 0 / 8%),
        0 12px 24px rgb(0 0 0 / 8%);
    }
    .lift { transition: transform 0.2s, box-shadow 0.2s; }
    .lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 16px 32px rgb(0 0 0 / 14%);
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="card one">One heavy shadow</div>
    <div class="card layered">Three layers</div>
    <div class="card layered lift">Hover me</div>
  </div>
</body>
</html>

La primera sombra de la lista se pinta encima. Usa para las sombras un negro semitransparente o un tono oscuro del fondo, nunca un gris puro, para que oscurezcan lo que haya debajo.

Sombras inset

inset dibuja la sombra dentro de la caja de padding, como si la superficie estuviera hundida. Queda bien en inputs de texto, zonas rebajadas y botones presionados:

input {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
button:active {
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 30%);
}

Una sombra inset se dibuja encima del fondo pero debajo del contenido. Las sombras que siguen la forma de las letras en lugar de la caja son text-shadow.

Errores comunes

Sombras negras puras y totalmente opacas. Parecen un contorno oscuro. Usa un alfa del 10% al 30%.
Un solo desenfoque enorme para dar profundidad. Apila una sombra pequeña y nítida con una grande y suave.
Una sombra cortada en el borde. Un ancestro con overflow: hidden la recorta; agrega padding al ancestro o mueve la regla de overflow.
Desenfoque negativo. Es inválido y se ignora toda la declaración.
Animar box-shadow en muchos elementos. Se vuelve a pintar en cada fotograma. En páginas pesadas, anima la opacity de un pseudoelemento que lleve la sombra más grande.

Preguntas frecuentes

¿Cuál es la sintaxis de box-shadow?

box-shadow: offset-x offset-y blur spread color;, por ejemplo box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Solo los dos desplazamientos son obligatorios; agrega inset para dibujar la sombra dentro de la caja.

¿Qué hace spread en box-shadow?

Agranda (positivo) o encoge (negativo) la sombra antes de desenfocarla. Una sombra sin desplazamiento, sin desenfoque y con un spread de 3px es un anillo sólido de 3px alrededor del elemento.

¿Cómo pongo una sombra solo abajo?

Desplázala hacia abajo y achícala con un spread negativo para que desaparezcan los lados: box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);.

¿box-shadow afecta el layout?

No. Una sombra no ocupa espacio ni mueve otros elementos, y por eso es una buena forma de agregar un anillo de foco o un efecto de elevación en hover sin que se mueva el layout. Puede quedar recortada por un overflow: hidden de un ancestro.

¿Puedo tener varias sombras box-shadow?

Sí, sepáralas con comas. La primera sombra se dibuja encima. Apilar una sombra pequeña y nítida con una grande y suave se ve más natural que una sola sombra grande.

Conceptos relacionados