Skip to content
💡 13 Técnicas de CSS box-shadow: sombras que dan vida a tu interfaz
Desarrollo web
10 min1,929 palabras

💡 13 Técnicas de CSS box-shadow: sombras que dan vida a tu interfaz

Bloques planos, botones sin profundidad, tarjetas que se funden con el fondo: este es el aspecto típico de un sitio donde el diseñador se olvidó del box-shadow. Sin embargo, un par de líneas de CSS pueden transformar un marcado insípido en una interfaz con carácter añadiendo espacio en blanco, resaltando un bloque clave o separando suavemente una sección sin un solo border.

El problema es que la mayoría de los desarrolladores se quedan en la sombra gris por defecto 0px 2px 5px rgba(0,0,0,0.2) y olvidan que box-shadow puede hacer mucho más: sombras multicapa, resplandores de color, neumorfismo, efectos inset e incluso renderizado de pixel art sin un solo div.

A continuación, 13 técnicas que convertirán box-shadow de una utilidad aburrida en su herramienta principal para trabajar la profundidad. Cada fragmento está copiado de proyectos reales y listo para usar.

💡 Resumen rápido:

  • Desglose de la sintaxis de box-shadow para que la recuerde a la primera
  • 13 fragmentos listos para usar: desde un borde apenas visible hasta un resplandor de color multicapa
  • Tres formas de incluir CSS en HTML y cuándo usar cada una
  • Preguntas frecuentes: rendimiento, filtro drop-shadow, inspector de Chrome y neumorfismo

Qué es box-shadow y cómo funciona

La propiedad box-shadow añade una o más sombras a un elemento. A diferencia de border, una sombra no afecta al flujo del documento ni aumenta las dimensiones del bloque; se dibuja «fuera», más allá de los límites del elemento.

Sintaxis completa:

1box-shadow: offset-x offset-y blur-radius spread-radius color;

Desglose de cada parámetro:

  • offset-x, desplazamiento horizontal. Un valor positivo desplaza la sombra a la derecha, uno negativo la desplaza a la izquierda.
  • offset-y, desplazamiento vertical. Un valor positivo mueve la sombra hacia abajo, uno negativo hacia arriba. Estos son los dos únicos parámetros obligatorios.
  • blur-radius, el radio de desenfoque. Cuanto mayor es el valor, más suave y amplia es la sombra. El valor por defecto es 0, lo que significa una sombra con bordes nítidos.
  • spread-radius, el radio de expansión. Un valor positivo expande la sombra hacia afuera, uno negativo la contrae hacia adentro. Útil para simular bordes sin border.
  • color, el color en cualquier formato: hex, rgb(), rgba(), hsl(). La transparencia mediante rgba() o hsla() produce las sombras más naturales.

El truco está en que puede pasar múltiples valores, separados por comas. Esto es precisamente lo que abre la puerta a las técnicas siguientes: cada sombra subsiguiente en la lista se superpone sobre la anterior.

1. Sombra apenas visible en tres lados

Una sombra minimalista que añade profundidad pero no grita pidiendo atención. Perfecta para tarjetas de producto, vistas previas de artículos y cualquier bloque sobre un fondo claro.

1box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Un desplazamiento solo hacia abajo de 8px y un desenfoque amplio de 24px crean un efecto de bloque flotante. Una opacidad de 0.2 hace que la sombra sea apenas visible sobre blanco, lo justo para que la vista se sienta cómoda.

2. Sombra ligera en todos los lados

Cuando un bloque necesita una sombra uniforme en todo su perímetro, por ejemplo, para una ventana modal o un tooltip.

1box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Un desplazamiento horizontal cero y un spread-radius de 0px distribuyen la sombra simétricamente. Un blur-radius amplio (29px) hace que la transición sea suave. El color rgba(100, 100, 111, ...) da un tono gris frío; queda mejor sobre blanco que el negro puro.

3. Sombra fina a la derecha y abajo

El clásico efecto «elevado». Funciona para botones, tarjetas con estados hover y cualquier elemento que deba parecer táctil.

1box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Valores de desplazamiento pequeños (alrededor de 2px) y un desenfoque pequeño crean una sombra nítida, casi vectorial. Combina bien con transform: translateY(-2px) en hover; la sombra «se mueve» con el bloque, potenciando el efecto de elevación.

4. Sombra intensa en todos los lados

Para casos en los que un elemento necesita destacar notablemente del fondo: secciones hero, tarjetas con contenido importante, banners.

1box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Una opacidad alta (0.35) y un desenfoque pequeño (15px) producen una sombra pronunciada y legible. Con desplazamiento horizontal cero, se sitúa uniformemente; el bloque parece flotar sobre la página.

5. Sombra difusa multicapa

Cinco capas de sombra trabajando juntas: una capa profunda para la separación del fondo, el resto para una difusión suave en los lados.

1box-shadow:
2  rgba(0, 0, 0, 0.25) 0px 54px 55px,
3  rgba(0, 0, 0, 0.12) 0px -12px 30px,
4  rgba(0, 0, 0, 0.12) 0px 4px 6px,
5  rgba(0, 0, 0, 0.17) 0px 12px 13px,
6  rgba(0, 0, 0, 0.09) 0px -3px 5px;

La primera capa es la sombra principal hacia abajo (54px, opacidad 0.25). La segunda es una sombra ligera hacia arriba (desplazamiento negativo -12px). El resto refina los bordes. Juntas producen un patrón de luz y sombra complejo y realista, como un objeto físico bajo iluminación difusa.

6. Borde fino con una sombra interior

Dos sombras crean la ilusión de un borde fino (border) a la vez que añaden profundidad. Ni un solo border en el código.

1box-shadow:
2  rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
3  rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
4  rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Desglose de las tres capas:

  • Primero, el «borde»: desplazamiento y desenfoque cero, spread-radius de 2px imita border: 2px solid.
  • Segundo, la sombra principal hacia abajo para dar volumen.
  • Tercero, una sombra blanca inset desde arriba, que aporta un destello (efecto vidrio).

7. Sombra a la izquierda y abajo

Una dirección no estándar: la sombra cae hacia la izquierda y ligeramente hacia abajo. Queda bien en elementos alineados al borde derecho o para crear una composición asimétrica.

1box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Un desplazamiento horizontal negativo (-4px) envía la sombra a la izquierda. Un spread-radius negativo (-6px) recoge la sombra hacia adentro, haciéndola más compacta que el propio bloque; no «sobresale» de los bordes.

8. Sombra a dos lados: luz desde arriba a la izquierda, sombra abajo a la derecha

Simulación de una fuente de luz direccional, como si una lámpara iluminara desde la esquina superior izquierda.

1box-shadow:
2  rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
3  rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

La primera capa es una sombra azulada (rgba(136, 165, 191, ...)) hacia la derecha y abajo. La segunda es un "realce" blanco hacia la izquierda y arriba (desplazamientos negativos, opacidad alta). Juntas crean un efecto tridimensional realista; el bloque parece iluminado por un softbox.

9. Borde con resplandor de color

Una sola sombra sin desplazamiento ni desenfoque, pero con un radio de expansión positivo, produce un nítido resplandor de color alrededor del elemento.

1box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Un resplandor azul (rgba(3, 102, 214, ...)) con un radio de 3px. Perfecto para campos de formulario enfocados (:focus), botones activos y para resaltar el elemento actual del menú. Sustituya el color por rgba(220, 38, 38, 0.3) y obtendrá un resalte de error de validación.

10. Doble sombra interior para un efecto "presionado"

Dos capas con inset crean un profundo efecto cóncavo. Adecuado para fondos con textura, botones presionados y paneles decorativos.

1box-shadow:
2  rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
3  rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

La palabra clave inset desplaza la sombra hacia el interior del elemento. La primera capa es una sombra amplia desde arriba. La segunda es más oscura y compacta, también desde arriba. Un radio de expansión negativo (-12px, -18px) evita que las sombras llenen todo el bloque; los bordes permanecen claros mientras el centro queda hundido.

11. "Cascada" de sombras de color hacia abajo

Cinco capas del mismo color con desplazamiento creciente crean un efecto de sombra de color multicapa, similar a Material Design pero más brillante.

1box-shadow:
2  rgba(240, 46, 170, 0.4) 0px 5px,
3  rgba(240, 46, 170, 0.3) 0px 10px,
4  rgba(240, 46, 170, 0.2) 0px 15px,
5  rgba(240, 46, 170, 0.1) 0px 20px,
6  rgba(240, 46, 170, 0.05) 0px 25px;

Cada capa sucesiva se desplaza 5px más y tiene menor opacidad. No se especifica desenfoque, por lo que las sombras son nítidas, como franjas vectoriales. Esto produce un brillante rastro neón detrás del bloque. Sustituya el rosa por el color de su marca para obtener un acento reconocible.

12. "Cascada" de color hacia la derecha y abajo

La misma técnica pero con desplazamiento horizontal; la sombra va en diagonal.

1box-shadow:
2  rgba(240, 46, 170, 0.4) 5px 5px,
3  rgba(240, 46, 170, 0.3) 10px 10px,
4  rgba(240, 46, 170, 0.2) 15px 15px,
5  rgba(240, 46, 170, 0.1) 20px 20px,
6  rgba(240, 46, 170, 0.05) 25px 25px;

Una cascada diagonal crea una sensación de movimiento hacia la derecha y abajo. Queda muy bien en botones al pasar el cursor; el bloque parece "deslizarse" detrás de su sombra.

13. Sombra difusa con gradiente de densidad

Cinco capas donde cada desplazamiento sucesivo se duplica (2px, 4px, 8px, 16px, 32px) mientras la opacidad permanece constante. El resultado es una sombra con un gradiente de densidad suave, la más realista de la colección.

1box-shadow:
2  rgba(0, 0, 0, 0.09) 0px 2px 1px,
3  rgba(0, 0, 0, 0.09) 0px 4px 2px,
4  rgba(0, 0, 0, 0.09) 0px 8px 4px,
5  rgba(0, 0, 0, 0.09) 0px 16px 8px,
6  rgba(0, 0, 0, 0.09) 0px 32px 16px;

Un pequeño desenfoque para cada capa (1px, 2px, 4px, 8px, 16px) crece proporcionalmente al desplazamiento. Esto produce una difusión físicamente precisa; la sombra se "desvanece" con la distancia, como en el mundo real. Perfecta para tarjetas que necesitan verse lo más naturales posible.

Tres formas de incluir CSS en HTML

Una vez elegido un fragmento, necesita agregarlo a la página. CSS ofrece tres opciones, y cada una tiene su nicho.

CSS interno

Las reglas se colocan en una etiqueta <style> dentro del <head> del documento HTML. Adecuado para sitios de una sola página y prototipos rápidos; todo está en un solo archivo.

1<html lang="ru">
2<head>
3  <meta charset="utf-8">
4  <title>CSS box-shadow — примеры</title>
5  <style>
6    .card {
7      display: block;
8      margin: 0 auto;
9      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
10    }
11  </style>
12</head>
13<body>
14  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
15</body>
16</html>

La desventaja es que el navegador no almacena los estilos en caché por separado y no pueden reutilizarse en otras páginas.

CSS en línea

Los estilos se escriben directamente en el atributo style de un elemento HTML. Es la forma más rápida de aplicar estilos sobre la marcha, pero también la más incómoda de mantener.

1<img
2  src="screenshot.jpg"
3  alt="Пример карточки с тенью"
4  style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin: 0 auto;"
5>

Use los estilos en línea de forma selectiva: para valores dinámicos desde JavaScript, para maquetaciones de correo electrónico (donde los clientes de correo suelen eliminar las hojas de estilo externas) y para el CSS crítico «above the fold».

CSS externo

Las reglas se trasladan a un archivo .css independiente y se vinculan mediante <link>. Este es el estándar para cualquier proyecto más complejo que una sola página.

Archivo styles.css:

1.card {
2  display: block;
3  margin: 0 auto;
4  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
5}

Documento HTML:

1<html lang="ru">
2<head>
3  <meta charset="utf-8">
4  <title>CSS box-shadow — примеры</title>
5  <link rel="stylesheet" href="styles.css">
6</head>
7<body>
8  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
9</body>
10</html>

El CSS externo es almacenado en caché por el navegador, fácil de mantener y escalable. En los tres casos, el resultado de la representación es el mismo; elija el método según la arquitectura de su proyecto.

Un video corto pero denso (8 minutos): el autor muestra cómo reemplazar sombras planas grises por resplandores con degradado, capa por capa, explicando cada parámetro.

⁉️🤔 Preguntas frecuentes

¿Cuál es la diferencia entre box-shadow y filter: drop-shadow()?

box-shadow sigue la forma del cuadro delimitador del elemento, siempre un rectángulo. filter: drop-shadow() sigue el canal alfa y traza la forma real: para un PNG con transparencia, la sombra seguirá el contorno del objeto en lugar del marco rectangular. Por eso drop-shadow() es indispensable para imágenes con fondo recortado, iconos y SVG. Pero funciona más lento porque el navegador analiza píxeles, no la geometría del bloque.

¿Cuántas capas de box-shadow se pueden configurar sin perder rendimiento?

No hay un límite formal, pero el techo práctico en un dispositivo promedio es de 10 a 15 capas. Más allá de eso, comenzará a notar caídas de FPS durante el desplazamiento y las animaciones, especialmente en dispositivos móviles. La razón es que cada capa requiere un pase de renderizado independiente. Para elementos animados, limítese a 2 o 3 capas y use will-change: box-shadow; esto le indica al navegador que mueva el elemento a una capa compuesta separada.

¿Cómo se visualiza y depura box-shadow en las DevTools de Chrome?

Abra DevTools (F12), seleccione el elemento en la pestaña Elements y busque la propiedad box-shadow en el panel Styles a la derecha. Haga clic en el icono del cuadrado de color junto al valor; se abrirá un editor visual de sombras con controles deslizantes para offset-x, offset-y, blur y spread. Puede cambiar los valores con el ratón y ver el resultado de inmediato. Para sombras de varias capas, cada capa se edita por separado; aparecen listadas en el mismo campo, separadas por comas.

¿Qué es el neumorfismo y cómo se logra con box-shadow?

El neumorfismo es un estilo visual donde los elementos parecen estar «moldeados» del mismo material que el fondo. Se logra con dos sombras: una clara desde la parte superior izquierda y una oscura desde la parte inferior derecha (como en la técnica n.º 8). La condición clave es que el color del fondo de la página y el del elemento deben coincidir o ser muy cercanos. Ejemplo para un tema claro:

1> .neuromorphic {
2>   background: #e0e0e0;
3>   box-shadow:
4>     8px 8px 16px #bebebe,
5>     -8px -8px 16px #ffffff;
6> }
7> 
8 
9 markdown 
10 
11The style is striking but controversial from an accessibility standpoint: low contrast makes elements hard to distinguish for people with visual impairments. Use sparingly and be sure to check contrast.
12 
13**Can you use box-shadow to render shapes without a div?**
14 
15> Yes, and this is a separate genre of CSS art. Since `box-shadow` supports an unlimited number of layers, each with its own coordinates and color, you can "draw" pixel art with a single `box-shadow` on a single `div`. The technique works like this: each layer with a 1px × N offset and zero blur is one "pixel." Hundreds of layers combine into an image. Generators like [CSS Box Shadow Generator](https://getcssscan.com/css-box-shadow-examples) automate the process, but for production this is more of a novelty; SVG will do the job more efficiently.
16 
17&#35;&#35; Which shadow should you choose for your project?
18 
19The thirteen techniques above cover the full spectrum: from an unobtrusive shadow for modest cards to a bold neon cascade. The key skill here is not memorizing all the snippets but understanding the logic of the parameters; then you can assemble the right shadow for the task faster than you can find a ready-made one.
20 
21A quick guide:
22 
23- Need depth without visual noise? Use techniques **1-3** (barely visible single shadows).
24- Want realistic "hovering" above the page? **5** (multi-layered diffused) or **13** (density gradient).
25- Want to highlight an interactive element with color? **9** (colored border) or **11-12** (colored cascade).
26- Simulating pressed or glass effect? **6** and **10** (inset shadows).
27- Need neumorphism? **8** (two-sided shadow) plus a background matching the element.
28 
29Bookmark this page as a cheat sheet. And if you create your own signature shadow recipe, test it on real devices: the same shadow can look completely different on a Retina display and on a budget office monitor.
Redacción
RedacciónEquipo editorial→ All publications

Un equipo profesional de escritores y editores especializados en la creación de contenido de calidad.