# text-shadow en CSS: sintaxis, ejemplos y mejores opciones

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

text-shadow es una propiedad pequeña con fama de rescatar titulares ilegibles. Se le da mejor decorar que rescatar. Aquí tienes la sintaxis, unos cuantos estilos que vale la pena copiar y qué usar cuando el problema real es la legibilidad.

## The short version

- La propiedad text-shadow de CSS recibe un desplazamiento horizontal, un desplazamiento vertical, un radio de desenfoque opcional y un color.
- Puedes apilar varias sombras sobre el mismo texto separándolas con comas, y la primera de la lista se dibuja encima.
- A diferencia de box-shadow, text-shadow no tiene valor de expansión ni palabra clave inset.
- Las sombras desplazadas nítidas, sin desenfoque, son el estilo decorativo más útil, de los titulares retro a las sombras largas.
- Una sombra oscura y suave es un mal remedio para el texto sobre una imagen recargada; un velo, una imagen más oscura o un fondo más tranquilo lo resuelven de verdad.

Una **sombra de texto en CSS** se escribe `text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4)`: un desplazamiento horizontal, un desplazamiento vertical, un radio de desenfoque opcional y un color. Separa varias sombras con comas para apilarlas. Es excelente para efectos decorativos como titulares con desplazamiento nítido, sombras largas y contornos simulados. Es una mala herramienta para hacer legible el texto sobre una foto recargada, y las mejores opciones para eso están más abajo.

## Sintaxis de text-shadow

```css
/* offset-x | offset-y | blur-radius | color */
h1 { text-shadow: 2px 3px 6px rgb(0 0 0 / 0.35); }

/* No blur: a hard copy of the letters */
h1 { text-shadow: 3px 3px 0 #f97316; }

/* Colour first is also valid */
h1 { text-shadow: #f97316 3px 3px; }

/* Several shadows: the first is drawn on top */
h1 { text-shadow: 2px 2px 0 #fde68a, 4px 4px 0 #f97316; }

/* Remove an inherited shadow */
h1 { text-shadow: none; }
```

La gramática completa en cinco líneas. Las longitudes pueden ser negativas para lanzar la sombra hacia arriba o hacia la izquierda.

| Parte | Obligatoria | Qué hace |
| --- | --- | --- |
| Desplazamiento horizontal | Sí | Positivo mueve la sombra a la derecha, negativo a la izquierda |
| Desplazamiento vertical | Sí | Positivo la mueve hacia abajo, negativo hacia arriba |
| Radio de desenfoque | No | Vale 0 por defecto, un borde nítido. No puede ser negativo |
| Color | No | Por defecto es el color del texto, `currentcolor` |

Aquí no hay expansión ni `inset`. Eso pertenece a [box-shadow](https://gradiently.design/es/guide/css-box-shadow), que sombrea la caja del elemento y no sus letras.

La sombra se pinta detrás del texto y toma la forma de cada glifo, incluidos subrayados y decoraciones. No cambia la maquetación: un desplazamiento grande puede salirse del elemento y solaparse con los vecinos sin empujarlos, así que deja espacio con padding si la sombra es grande.

## Ejemplos de text-shadow que vale la pena copiar

Los estilos que aguantan son los de borde nítido. Una sombra sin desenfoque se lee como una decisión gráfica deliberada; un desenfoque gris suave bajo el texto corrido suele leerse como un error.

```css
/* 1. Subtle lift for large display type on a light page */
.lift { text-shadow: 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 3px rgb(15 23 42 / 0.18); }

/* 2. Retro offset in a second colour */
.retro { color: #1e1b4b; text-shadow: 4px 4px 0 #f472b6; }

/* 3. Double offset, poster style */
.double { color: #fff7ed; text-shadow: 3px 3px 0 #f97316, 6px 6px 0 #7c2d12; }

/* 4. Long shadow: many 1px steps */
.long {
  color: #fef3c7;
  text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309, 3px 3px 0 #b45309,
    4px 4px 0 #b45309, 5px 5px 0 #b45309, 6px 6px 0 #b45309,
    7px 7px 0 #b45309, 8px 8px 0 #b45309;
}

/* 5. Pressed in: a light edge below dark text on a mid tone */
.pressed { color: #334155; text-shadow: 0 1px 0 rgb(255 255 255 / 0.45); }
```

Cinco estilos que funcionan. La sombra larga no es más que la misma sombra nítida repetida un píxel más lejos cada vez.

Los desplazamientos retro y las sombras largas se ven en detalle en [efectos de texto retro](https://gradiently.design/es/guide/retro-text-effect) y [efectos de texto 3D](https://gradiently.design/es/guide/3d-text-effect). Para un contorno limpio, mejor `-webkit-text-stroke` con `paint-order: stroke fill` que el viejo truco de cuatro sombras en cada esquina, que deja huecos en las curvas; [texto con contorno](https://gradiently.design/es/guide/outline-text) muestra los dos.

- Letras añil: #1e1b4b
- Desplazamiento rosa: #f472b6
- Letras crema: #fff7ed
- Primer escalón naranja: #f97316
- Segundo escalón óxido: #7c2d12

Los colores de los ejemplos retro y de doble desplazamiento. Las sombras desplazadas funcionan mejor cuando su color se distingue claramente de las letras, no cuando es una copia más oscura.

## Por qué una sombra suave no arregla la legibilidad

El uso habitual de `text-shadow` es un desenfoque oscuro detrás de texto blanco sobre una foto, con la esperanza de separar ambos. Ayuda un poco en los bordes de cada letra y no hace nada en el espacio interior, donde la foto sigue viéndose con toda su fuerza. Sube el desenfoque y la opacidad hasta que funcione y tendrás una mancha alrededor de cada palabra. Los halos alrededor del texto, claros u oscuros, parecen anticuados y siguen fallando en las zonas más brillantes de la imagen.

Los comprobadores de contraste también ignoran las sombras. Miden el color del texto frente al color del fondo, así que un titular que solo aprueba gracias a su sombra saldrá señalado en una auditoría, y con razón. Los umbrales están en [contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility).

### La sombra como muleta

- Halo negro desenfocado detrás de texto blanco
- Falla donde la imagen es más brillante
- Las herramientas de contraste siguen marcando error
- Bordes sucios en texto pequeño

### Arregla el fondo

- Un velo degradado bajo las palabras
- Oscurece o desatura la imagen
- Lleva el texto a la zona más tranquila
- Elige un fondo pensado para llevar palabras

## Mejores opciones para texto sobre imágenes y degradados

Un velo es un degradado que oscurece solo la parte de la imagen que hay detrás del texto y se desvanece en el resto. Mantiene la foto luminosa donde importa y da a cada letra el mismo fondo tranquilo. [Superposiciones de degradado en CSS](https://gradiently.design/es/guide/css-gradient-overlay) explica las capas al completo.

Velo inferior para pies de foto: `linear-gradient(to top, rgb(2 6 23 / 0.78) 0%, rgb(2 6 23 / 0.45) 35%, rgb(2 6 23 / 0) 70%)`

Oscuro abajo, transparente a dos tercios de altura. Ponlo sobre una foto y coloca el texto en el tercio inferior.

```css
.card {
  background-image:
    linear-gradient(to top, rgb(2 6 23 / 0.78), rgb(2 6 23 / 0) 70%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}
```

El velo como capa superior del fondo y la foto debajo. El texto no necesita sombra.

Otras opciones fiables: pasa la imagen por `filter: brightness(0.75)` en su propia capa, recorta para que las palabras caigan sobre cielo o pared en lugar de sobre detalle, o pon el texto sobre una franja sólida. [Texto sobre imágenes](https://gradiently.design/es/guide/text-over-image) repasa cada una con ejemplos.

Una publicación vertical con un titular crema que cruza una zona brillante del degradado y pierde contraste

Palabras claras sobre la parte más brillante del fondo. Una sombra solo difuminaría el problema.

La misma publicación vertical con el degradado oscureciéndose detrás del titular, que se lee con claridad

Aquí el fondo se oscurece detrás de la línea, así que las palabras se leen sin ningún efecto encima.

Ese es justo el trabajo que los Marks de Gradiently hacen por sí solos: la zona más tranquila se coloca detrás de tus palabras y la tinta automática elige texto claro u oscuro línea a línea, sin sombra, caja ni desenfoque. Cuando quieres la sombra como decoración y no como parche, sus tratamientos de letra como Relieve, Doble y Estela te dan estilos desplazados sin escribir una sola sombra.

## text-shadow sobre texto con degradado

El texto con degradado se hace con `background-clip: text` y un color de texto transparente. Añádele un `text-shadow` y la sombra se ve a través de las letras transparentes, ensuciando el degradado desde dentro. La solución es sombrear el elemento: `filter: drop-shadow(3px 3px 0 #1e1b4b)` sigue la forma pintada de las letras y queda detrás. La técnica está explicada en [texto con degradado en CSS](https://gradiently.design/es/guide/css-gradient-text).

> **Una sombra por drop-shadow()** `drop-shadow()` admite una sombra por función, pero puedes encadenar varias: `filter: drop-shadow(2px 2px 0 #f97316) drop-shadow(2px 2px 0 #7c2d12)`. Cada una sombrea el resultado de la anterior.

## Rendimiento y animación

Las sombras nítidas son baratas. Los radios de desenfoque grandes en pasajes largos de texto cuestan más de pintar, y animar `text-shadow` repinta el texto en cada fotograma. Si quieres animar un titular, muévelo con `transform` y deja la sombra fija.

## FAQ

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

`text-shadow: offset-x offset-y blur-radius color`, por ejemplo `2px 2px 4px #000`. Solo los dos desplazamientos son obligatorios.

### ¿Puedo añadir más de una sombra de texto?

Sí. Separa las sombras con comas. La primera de la lista se pinta encima de las demás.

### ¿text-shadow tiene valor de expansión?

No. La expansión e `inset` solo existen en `box-shadow`. Para engrosar una sombra de texto, apila varias sombras con desplazamientos pequeños.

### ¿text-shadow mejora la accesibilidad?

No de forma fiable. Las comprobaciones de contraste ignoran las sombras, así que el texto debe alcanzar el contraste exigido frente a su fondo sin ellas.

### ¿Cómo hago legible un texto blanco sobre una foto sin text-shadow?

Pon un velo degradado oscuro detrás de la zona del texto, oscurece la imagen o coloca las palabras sobre una parte tranquila de la foto.