# Sombra de texto: cuándo ayuda y mejores alternativas

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

La sombra paralela es el arreglo más habitual para un texto ilegible y una de las formas más rápidas de que un diseño parezca anticuado. Aquí tienes cuándo es la opción correcta y qué usar el resto del tiempo.

## The short version

- Una sombra de texto funciona mejor como estilo deliberado, como una sombra dura desplazada y sin desenfoque, que como parche para un mal contraste.
- Los brillos suaves y los halos borrosos tras las letras difuminan sus bordes y suelen hacer que un diseño parezca barato y anticuado.
- Una sombra fina y ceñida es una opción razonable para subtítulos sobre vídeo en movimiento, donde no puedes controlar el fondo.
- Para que un texto se lea, la ubicación, un velo degradado, un fondo tintado y un peso mayor suelen funcionar mejor que cualquier sombra.
- En CSS, text-shadow admite un desplazamiento horizontal, uno vertical, un radio de desenfoque opcional y un color, y acepta varias sombras separadas por comas.

Una **sombra de texto** ayuda en dos situaciones: como estilo deliberado, normalmente una sombra dura desplazada unos píxeles y sin desenfoque, y como borde de seguridad fino en subtítulos sobre vídeo en movimiento. Como rescate de palabras que no se leen sobre una foto o un degradado, suele perjudicar: las sombras suaves y los brillos difuminan justo los bordes con los que el ojo reconoce las letras, y datan un diseño al instante. Para mejorar la legibilidad, lleva las palabras a una zona más tranquila, añade un velo degradado, tiñe el fondo o elige un peso mayor.

## Tipos de efecto de sombra de texto

| Tipo | Qué aspecto tiene | Veredicto |
| --- | --- | --- |
| Dura y desplazada | Una copia sólida de las letras desplazada hacia abajo y a la derecha, sin desenfoque | Un estilo potente: retro, juguetón, de cartel |
| Sombra larga | Muchas copias desplazadas que forman un bloque diagonal | Un estilo cercano a la extrusión 3D; úsalo en pocas palabras |
| Sombra sutil | Desplazamiento pequeño, desenfoque pequeño, poca opacidad | Apenas se ve en la mayoría de pantallas; a menudo no sirve de nada |
| Borde ceñido para subtítulos | Poco o ningún desplazamiento, desenfoque corto, oscura | Bien para subtítulos sobre vídeo impredecible |
| Brillo suave o halo | Una nube de color ancha y borrosa alrededor de cada letra | Evítalo: empasta las letras y parece barato |

Solo las dos primeras son decisiones de diseño. Las dos del medio son utilidades. La última es un hábito que conviene perder.

## Cuándo ayuda una sombra de texto

### Como estilo duro y desplazado

Una sombra sin desenfoque, desplazada un pequeño porcentaje de la altura de la letra y en un color de la paleta que contraste, es un estilo tipográfico con larga historia en carteles, envases y señalética. Transmite seguridad y un punto de nostalgia. Trátala como cualquier efecto: uno por diseño, unas pocas palabras grandes, una letra gruesa. [Los efectos de texto](https://gradiently.design/es/guide/text-effects) lo comparan con otros tratamientos. [Los efectos de texto retro](https://gradiently.design/es/guide/retro-text-effect) muestran a sus primos cercanos, el doble y la estela.

### Tras subtítulos en vídeo

Los subtítulos van sobre imágenes que cambian en cada fotograma, así que no puedes elegir una zona tranquila. Una sombra ceñida y oscura o un contorno fino mantiene legibles los subtítulos blancos cuando pasa una ventana luminosa por detrás. Mantenla cerca de las letras: desenfoque corto y poco o ningún desplazamiento. [El diseño de subtítulos de vídeo](https://gradiently.design/es/guide/video-captions-design) trata el tamaño y la colocación.

## Cuándo perjudica una sombra de texto

El problema de usar una sombra para arreglar el contraste es que trata el síntoma. El fondo sigue recargado; solo has añadido una mancha alrededor de las letras. Los brillos suaves son lo peor, porque extienden una nube borrosa más allá de cada letra y suavizan el borde que define su forma. En redes sociales, además, se comprimen mal y se convierten en bandas manchadas.

### La sombra como muleta

- Brillo negro suave sobre texto blanco encima de una foto
- Halo de color alrededor de un titular
- Sombra en texto pequeño de cuerpo
- Varias sombras distintas en un mismo diseño
- Sombra más contorno más brillo en una sola palabra

### Mejor opción

- Lleva las palabras a la zona más tranquila
- Un velo degradado en un borde de la imagen
- Letra más grande y gruesa para la línea pequeña
- Un estilo coherente en toda la serie
- Un solo tratamiento, elegido a propósito

## Mejores alternativas a una sombra de texto

1. **Mueve las palabras** Busca la zona más tranquila y uniforme del fondo y pon ahí el texto. Así se resuelven casi todos los problemas antes de que aparezcan.
2. **Añade un velo degradado** Un fundido suave de oscuro a transparente a lo largo de un borde da contraste sin una forma visible. [Texto legible sobre fotos](https://gradiently.design/es/guide/readable-text-on-photos) incluye códigos de velos.
3. **Calma el fondo** Tiñe una foto con uno o dos colores, baja sus luces altas o elige un degradado con una región más tranquila.
4. **Refuerza la tipografía** Sube un peso y un tamaño. Una sans en negrita de tamaño generoso no necesita ayuda sobre casi ningún fondo.
5. **Cambia la tinta** A veces el texto oscuro sobre una zona clara gana al texto blanco con sombra. Elige la tinta línea a línea, no para todo el diseño.

Una publicación vertical que dice Abierto hasta tarde, con el fondo irregular detrás de las letras

Palabras sobre un tramo agitado del fondo: justo aquí es cuando la gente recurre a un brillo.

La misma publicación con letras limpias y sin sombra, sobre una zona tranquila del degradado

Las mismas palabras con el fondo calmado detrás. No hace falta sombra y las letras se mantienen nítidas.

En los degradados, concretamente, el fondo suele aclararse u oscurecerse a lo largo del encuadre, así que un solo color de tinta no sirve para todas las líneas. [El texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient) explica cómo planearlo y [la tipografía sobre fondos recargados](https://gradiently.design/es/guide/type-on-busy-backgrounds) trata los patrones y las texturas.

## Sombra de texto en CSS

La propiedad CSS `text-shadow` admite un desplazamiento horizontal, uno vertical, un radio de desenfoque opcional y un color. Separa varias sombras con comas; la primera de la lista queda encima. Usa unidades `em` para que la sombra escale con el tamaño de la fuente. La referencia completa está en [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow).

```css
/* Hard offset style: no blur, colour from the palette */
.headline-offset {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #9a3412;
}

/* Tight caption edge for text over video */
.caption {
  color: #ffffff;
  text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}

/* Preferred fix for readability: a scrim, not a shadow */
.hero {
  background:
    linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
    url("/images/hero.jpg") center / cover;
}
```

Dos sombras que merecen la pena y el velo que sustituye al resto.

Los verificadores automáticos de contraste comparan el color del texto con el del fondo e ignoran la sombra. Si una herramienta marca tu texto con poco contraste, una sombra puede mejorarlo a la vista en tu pantalla, pero no cambiará la medición. Arregla el fondo o la tinta. [La sombra de texto en CSS](https://gradiently.design/es/guide/css-text-shadow) tiene más recetas para la web.

## Cómo trata Gradiently la legibilidad

Gradiently nació de la idea de que las palabras no deberían necesitar rescate. Un Mark sabe dónde están las palabras: su región más tranquila y de mejor contraste pasa detrás del texto, los colores junto a las letras se oscurecen o se aclaran y el detalle recargado se suaviza. Después la Tinta automática elige letra clara u oscura para cada línea a partir de la paleta del propio Mark. No intervienen cajas, sombras ni desenfoque, y tú eliges con qué fuerza responde el Mark. Si quieres profundidad como estilo, el tratamiento de lettering Relieve da letras con volumen en los colores del Mark y Doble dibuja letras abiertas por duplicado, ambos nítidos y sin desenfoque.

## FAQ

### ¿Debo usar una sombra de texto para que el texto se lea?

Normalmente no. La ubicación, un velo degradado, un fondo más tranquilo o un peso mayor hacen legible el texto sin difuminar las letras.

### ¿Qué es una sombra dura en el texto?

Una copia de las letras desplazada hacia abajo y a un lado, sin desenfoque, normalmente en un color que contrasta. Es un estilo deliberado que se ve en carteles y envases.

### ¿Cómo añado una sombra de texto en CSS?

Usa `text-shadow: 0.06em 0.06em 0 #9a3412;`, donde los valores son desplazamiento horizontal, desplazamiento vertical, radio de desenfoque y color.

### ¿Mejora la sombra de texto el contraste para la accesibilidad?

Los verificadores automáticos comparan el color del texto con el del fondo e ignoran la sombra, así que una sombra no arregla una relación insuficiente. Arregla el fondo o la tinta.

### ¿Por qué los efectos de texto brillante parecen baratos?

Un brillo extiende una nube borrosa alrededor de cada letra, suaviza sus bordes y a menudo forma bandas cuando se comprime la imagen.