La versión corta
- 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.
En esta página
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
/* 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; }Obligatoria
Qué hace
Obligatoria
Qué hace
Obligatoria
Qué hace
Qué hace
currentcolorinset. Eso pertenece a 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.
/* 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); }Los desplazamientos retro y las sombras largas se ven en detalle en efectos de texto retro y efectos de texto 3D. 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 muestra los dos.
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.
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 explica las capas al completo.
linear-gradient(to top, rgb(2 6 23 / 0.78) 0%, rgb(2 6 23 / 0.45) 35%, rgb(2 6 23 / 0) 70%).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;
}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 repasa cada una con ejemplos.
Palabras claras sobre la parte más brillante del fondo. Una sombra solo difuminaría el problema.
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.
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.
Preguntas frecuentes
¿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.
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