La versión corta
- 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.
En esta página
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
Qué aspecto tiene
Veredicto
Qué aspecto tiene
Veredicto
Qué aspecto tiene
Veredicto
Qué aspecto tiene
Veredicto
Qué aspecto tiene
Veredicto
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 lo comparan con otros tratamientos. Los efectos de texto retro 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 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 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.
Palabras sobre un tramo agitado del fondo: justo aquí es cuando la gente recurre a un brillo.
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 explica cómo planearlo y la tipografía sobre fondos recargados 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.
/* 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;
}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 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.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil