Propiedad CSS box-shadow

La propiedad box-shadow permite añadir una o más sombras alrededor de un elemento especificando valores para el desplazamiento horizontal, el desplazamiento vertical, el radio de desenfoque, el radio de expansión, el color y la palabra clave inset. Esta página recorre cada uno de esos valores y muestra cómo combinarlos para obtener sombras múltiples, sombras internas (inset), sombras en un solo lado y patrones comunes de interfaz como tarjetas elevadas.

La propiedad box-shadow es una de las propiedades de CSS3.

Puedes añadir efectos separados por comas. Si especificas un border-radius en el elemento con sombra, la sombra adoptará las mismas esquinas redondeadas.

Estos son dos valores que establecen el desplazamiento de la sombra. El desplazamiento horizontal (H-offset) especifica la distancia horizontal. Los valores positivos colocan la sombra a la derecha del elemento. Los valores negativos la colocan a la izquierda. El desplazamiento vertical (V-offset) especifica la distancia vertical. Un valor positivo coloca la sombra debajo del elemento, mientras que un valor negativo la coloca encima. Si ambos valores son 0, la sombra aparece directamente detrás del elemento.

El tercer valor es el radio de desenfoque. Es opcional. Cuanto mayor sea el número, más grande y suave será el desenfoque. Los valores negativos no son válidos. Si se omite o se establece en 0, el borde de la sombra es nítido.

El cuarto valor es el radio de expansión. Es opcional. Los valores positivos hacen que la sombra se expanda y los negativos hacen que se contraiga. Si se omite o se establece en 0, la sombra tiene el mismo tamaño que el elemento.

El quinto valor es el color. Es opcional. Si se omite, la sombra adopta por defecto el color de texto calculado del elemento.

El sexto valor es la palabra clave inset. Es opcional y puede colocarse en cualquier parte de la definición de la sombra. Cuando está presente, crea una sombra interior en lugar de una sombra exterior.

Un detalle sutil pero importante: el color de la sombra casi siempre se establece con un valor semitransparente como rgba(0, 0, 0, 0.2) en lugar de un color sólido. Un negro semitransparente se mezcla con lo que haya detrás del elemento, por lo que la sombra se ve natural sobre cualquier fondo. Los colores sólidos como black o gray suelen verse duros.

Valor inicial	none
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredado	No.
Animable	Sí. La sombra de la caja es animable.
Versión	CSS3
Sintaxis DOM	object.style.boxShadow = "15px 25px 35px gray";

Sintaxis

Sintaxis de la propiedad CSS box-shadow

box-shadow: none | h-offset v-offset blur-radius spread-radius color inset;

Probemos a añadir sombras a un elemento.

Ejemplo de la propiedad box-shadow:

Ejemplo de la propiedad CSS box-shadow

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 50px;
        background-color: #eee;
        box-shadow: 5px 4px 10px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow example</h2>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Sombras múltiples

Tienes la posibilidad de separar el box-shadow con comas varias veces. Por ejemplo, usando el código siguiente se mostrarán 3 sombras con múltiples colores y posiciones en el mismo elemento.

Ejemplo de uso de la propiedad box-shadow para añadir múltiples sombras al elemento:

Ejemplo de la propiedad CSS box-shadow con múltiples valores

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 50%;
        height: 100px;
        border: 1px solid;
        padding: 10px;
        box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Multiple shadows with box-shadow.</h2>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ahora añadamos al elemento el valor inset. Añade una sombra dentro de la caja.

Ejemplo de la propiedad box-shadow con el valor "inset":

Ejemplo de la propiedad CSS box-shadow con el valor inset

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 50px;
        background-color: #eee;
        box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow with inset value</h2>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Sombra en un solo lado

Para crear una sombra que aparezca solo en un lado de una caja, usa un valor de radio de expansión negativo.

Propiedad CSS box-shadow

.shadow {
  box-shadow: 0 10px 8px -4px yellow;
}

Ejemplo de la propiedad box-shadow con un valor de radio de expansión negativo:

Ejemplo de la propiedad box-shadow

<!DOCTYPE html>
<html>
  <head>
    <style>
      .shadow {
        width: 100px;
        height: 100px;
        box-shadow: 0 10px 8px -4px yellow;
        background-color: #cccccc;
      }
    </style>
  </head>
  <body>
    <div class="shadow"></div>
  </body>
</html>

Pruébalo tú mismo »

Casos de uso comunes

El uso más frecuente de box-shadow es elevar un elemento de la página para que se perciba como una superficie separada: tarjetas, menús desplegables, modales y botones dependen de ello. Una sombra suave y semitransparente con un pequeño desplazamiento vertical transmite una elevación ligera:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .card {
        width: 220px;
        padding: 20px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: box-shadow 0.2s ease;
      }
      .card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
      }
    </style>
  </head>
  <body>
    <div class="card">Hover me to raise the card.</div>
  </body>
</html>

Dado que box-shadow es animable, combinarlo con una transición hace que el elemento parezca elevarse al pasar el cursor, como se muestra arriba. Apilar varias sombras en un único valor separado por comas produce una profundidad más suave y realista que una sombra pesada:

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07);
}

Algunos aspectos a tener en cuenta:

Las sombras no afectan al diseño. Un box-shadow se pinta fuera del modelo de caja, por lo que nunca desplaza a los elementos vecinos ni aumenta el ancho y alto del elemento. Usa margin si necesitas reservar espacio para ella.
Se respetan las esquinas redondeadas. Cuando el elemento tiene un border-radius, la sombra sigue automáticamente la misma curva.
Rendimiento. Los radios de desenfoque muy grandes y muchas sombras apiladas son costosos de repintar, especialmente durante las animaciones. Mantén los valores de desenfoque moderados y evita animar sombras pesadas en elementos grandes.

Valores

Valor	Descripción	Pruébalo
none	No se aplica ninguna sombra.	Pruébalo »
h-offset	Obligatorio. El desplazamiento horizontal de la sombra. Un valor positivo coloca la sombra a la derecha de la caja, un valor negativo la coloca a la izquierda.	Pruébalo »
v-offset	Obligatorio. El desplazamiento vertical de la sombra. Un valor positivo coloca la sombra debajo de la caja, un valor negativo la coloca encima.	Pruébalo »
blur-radius	Opcional. La sombra se desenfoca. Cuanto mayor sea el número, más desenfocada estará la sombra. Los valores negativos no son válidos.	Pruébalo »
spread-radius	Opcional. La sombra se expande. Un valor positivo aumenta el tamaño de la sombra, un valor negativo lo disminuye.	Pruébalo »
color	Opcional. El color de la sombra. Si se omite, adopta por defecto el color de texto del elemento.	Pruébalo »
inset	Opcional. Palabra clave opcional que puede colocarse en cualquier parte de la definición de la sombra. Convierte una sombra exterior en una sombra interior.	Pruébalo »
initial	Establece la propiedad en su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué propiedades se pueden ajustar al definir un box-shadow en CSS?