Docs ejecutables de CSS: Sombra de texto

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

text-shadow: offset-x offset-y blur-radius color;, por ejemplo text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. Los dos desplazamientos son obligatorios; el desenfoque vale 0 por defecto y el color es el del texto.

Q: ¿Cómo agrego más de una sombra al texto?

Separa las sombras con comas: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. La primera sombra se dibuja encima de las que vienen después.

Q: ¿text-shadow tiene un valor de expansión como box-shadow?

No. text-shadow no tiene spread ni la palabra clave inset. Para engrosar la sombra alrededor de las letras, apila varias sombras o usa -webkit-text-stroke para un contorno.

Sombra de texto en CSS: text-shadow, brillo y contorno

text-shadow dibuja una o varias sombras detrás del texto. Aprende los cuatro valores (desplazamiento x, desplazamiento y, desenfoque, color), cómo apilar sombras para efectos de brillo, contorno y 3D, y cómo usar una sombra para que el texto se lea sobre fondos recargados.

Esta página incluye editores ejecutables: edita, ejecuta y ve el resultado al instante.

Por Kevin Spektor, Co-founder & CTO

Publicado el Sep 24, 2026

Cómo funciona text-shadow

text-shadow pinta detrás del texto una copia desplazada y desenfocada. Le das un desplazamiento horizontal, un desplazamiento vertical, un desenfoque opcional y un color.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 36px; font-weight: 700; color: #111827; }
    p { margin: 12px 0; }
    .hard { text-shadow: 3px 3px 0 #f59e0b; }
    .soft { text-shadow: 2px 2px 6px rgb(0 0 0 / 35%); }
  </style>
</head>
<body>
  <p class="hard">Hard shadow</p>
  <p class="soft">Soft shadow</p>
</body>
</html>

3px 3px 0 #f59e0b significa 3px a la derecha (físicos, en cualquier dirección de escritura), 3px hacia abajo, sin desenfoque y en ámbar. La segunda sombra tiene un desenfoque de 6px y usa un negro semitransparente, la receta habitual para un efecto de profundidad sutil.

La sintaxis

text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?;

Valor	Obligatorio	Significado
offset-x	Sí	Positivo mueve la sombra a la derecha, negativo a la izquierda
offset-y	Sí	Positivo la mueve hacia abajo, negativo hacia arriba
blur-radius	No (0 por defecto)	Qué tan suave es el borde; los valores negativos son inválidos
color	No (por defecto, el color del texto)	Puede ir al principio o al final

text-shadow: none quita una sombra heredada. Cambia los valores de abajo para ver el efecto de cada uno:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { font-size: 44px; font-weight: 800; margin: 16px 0; }
  </style>
</head>
<body>
  <label>text-shadow: <input id="val" value="4px 4px 8px #2563eb" size="28"></label>
  <p id="sample">Shadow</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.textShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).textShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Prueba -4px -4px 0 #16a34a, 0 0 10px red y dos sombras separadas por una coma.

Varias sombras: brillo, contorno y 3D

Las comas apilan sombras; la primera se dibuja encima. De esa sola regla salen tres efectos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacked shadows</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 40px; font-weight: 800; margin: 0; }
    div { padding: 12px 16px; }
    .neon {
      background: #111827; color: #eff6ff;
      text-shadow: 0 0 4px #93c5fd, 0 0 12px #3b82f6, 0 0 24px #2563eb;
    }
    .outline {
      color: #ffffff;
      text-shadow: -2px -2px 0 #111827, 2px -2px 0 #111827,
                   -2px 2px 0 #111827, 2px 2px 0 #111827;
    }
    .deep {
      color: #f59e0b;
      text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309,
                   3px 3px 0 #b45309, 4px 4px 0 #92400e;
    }
  </style>
</head>
<body>
  <div class="neon">Neon glow</div>
  <div class="outline">Outlined</div>
  <div class="deep">3D text</div>
</body>
</html>

Brillo: desplazamientos en cero, desenfoque creciente, sobre un fondo oscuro.
Contorno: cuatro sombras nítidas, una por diagonal. Sirve para contornos finos; para un contorno más grueso y uniforme, -webkit-text-stroke: 2px #111827 (compatible con todos los navegadores actuales a pesar del prefijo) dibuja un trazo en los bordes de las letras.
3D: una serie de sombras nítidas, cada una 1px más lejos, para que las letras parezcan extruidas.

Texto legible sobre un fondo recargado

El texto blanco sobre una foto o un patrón pierde sus bordes donde el fondo es claro. Una sombra oscura y suave los recupera sin una caja visible:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Readable on a pattern</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      padding: 32px 16px;
      background: repeating-linear-gradient(45deg, #fde68a 0 20px, #ffffff 20px 40px);
      font-size: 32px; font-weight: 800; color: #ffffff;
    }
    .with { text-shadow: 0 1px 3px rgb(0 0 0 / 70%), 0 0 12px rgb(0 0 0 / 40%); }
  </style>
</head>
<body>
  <div class="hero">Without a shadow</div>
  <div class="hero with">With a shadow</div>
</body>
</html>

Una sombra ayuda, pero no garantiza el contraste. Para un texto largo sobre una imagen, agrega además una capa sólida o un degradado detrás del texto.

text-shadow vs box-shadow

	text-shadow	box-shadow
Sigue	La forma de las letras	La caja del elemento (y su border-radius)
Valor de expansión	No	Sí
`inset`	No	Sí
Varias, separadas por comas	Sí	Sí

Para sombras en tarjetas y botones, consulta box-shadow.

Errores comunes

Sombras oscuras y pesadas en el texto del cuerpo. Desdibujan la forma de las letras. Deja las sombras para títulos y etiquetas cortas.
Olvidar el segundo desplazamiento. text-shadow: 2px #000 es inválido; los dos desplazamientos son obligatorios.
Un desenfoque negativo. Es inválido y se descarta toda la declaración.
Esperar que la sombra ocupe espacio. Solo se pinta; las sombras grandes pueden superponerse a la línea siguiente o quedar recortadas por overflow: hidden.
Efectos de brillo sobre fondos claros. Un brillo claro sobre blanco es invisible. Los brillos necesitan un fondo oscuro.

Preguntas frecuentes

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

text-shadow: offset-x offset-y blur-radius color;, por ejemplo text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. Los dos desplazamientos son obligatorios; el desenfoque vale 0 por defecto y el color es el del texto.

¿Cómo agrego más de una sombra al texto?

Separa las sombras con comas: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. La primera sombra se dibuja encima de las que vienen después.

¿Cómo hago un efecto de brillo en el texto?

Usa sombras sin desplazamiento y con desenfoque, a menudo varias con un desenfoque creciente: text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb;. Sobre un fondo oscuro se ve como un brillo neón.

¿text-shadow tiene un valor de expansión como box-shadow?

No. text-shadow no tiene spread ni la palabra clave inset. Para engrosar la sombra alrededor de las letras, apila varias sombras o usa -webkit-text-stroke para un contorno.

¿text-shadow afecta el layout?

No. La sombra solo se pinta; no ocupa espacio ni mueve el contenido de alrededor, así que una sombra grande puede superponerse a los elementos cercanos.

Conceptos relacionados