Propiedad CSS text-shadow
Usa la propiedad CSS text-shadow para definir la sombra del texto. Consulta los valores y prueba ejemplos.
La propiedad CSS text-shadow añade una o más sombras al texto de un elemento. Es una de las propiedades de CSS3 y se usa ampliamente para crear profundidad sutil, efectos de resplandor y mejorar la legibilidad del texto sobre fondos complejos.
Esta página cubre la sintaxis, cada valor, cómo apilar varias sombras, efectos visuales comunes (sombra paralela, resplandor, texto en relieve), notas de accesibilidad y cómo text-shadow se diferencia de box-shadow.
Cómo funciona
Una sola sombra se describe con 2 o 3 valores de longitud seguidos de un <color> opcional:
- x-offset (primer valor, obligatorio) — la distancia horizontal. Un valor positivo mueve la sombra a la derecha; un valor negativo, a la izquierda.
- y-offset (segundo valor, obligatorio) — la distancia vertical. Un valor positivo mueve la sombra hacia abajo; un valor negativo, hacia arriba.
- blur-radius (tercer valor, opcional) — qué tan difusa es la sombra. Valores más grandes producen una sombra más suave y extendida. No puede ser negativo; el valor predeterminado es
0(sombra nítida). - color (opcional) — el color de la sombra. Si se omite, los navegadores recurren al valor
colordel elemento. Puedes elegir entre los colores HTML y usar nombres, hex,rgb(),rgba(),hsl()ohsla().
El x-offset y el y-offset son obligatorios; el blur-radius y el color son opcionales. El color y los dos desplazamientos pueden escribirse en cualquier orden, pero los valores de desplazamiento deben mantenerse en el orden x, y, blur.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredable | Sí. |
| Animable | Sí. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.textShadow = "1px 3px 3px #8ebf42"; |
Sintaxis
Sintaxis de la propiedad CSS text-shadow
text-shadow: h-shadow v-shadow [blur-radius] [color] | none | initial | inherit;Ejemplo de la propiedad text-shadow:
Ejemplo de la propiedad CSS text-shadow
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.shadow {
text-shadow: 2px 2px #1c87c9;
}
</style>
</head>
<body>
<h2>Text-shadow property example</h2>
<p>Some paragraph for example.</p>
<p class="shadow">Some paragraph with the text-shadow property.</p>
</body>
</html>Resultado
Ejemplo de la propiedad text-shadow con los valores "x-offset", "y-offset", "blur-radius" y "color":
Ejemplo de la propiedad CSS text-shadow donde se especifican x-offset, y-offset, blur-radius y color
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 5px 3px 2px #8ebf42;
font: 1em Roboto, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h2>Text-shadow property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>Apilar varias sombras
Puedes aplicar varias sombras al mismo texto separándolas con comas. Las sombras se pintan de adelante hacia atrás: la primera sombra de la lista queda encima, y cada sombra posterior se dibuja detrás de la anterior. Esta es la base para los efectos de resplandor, contorno y 3D.
/* a soft glow built from two stacked shadows */
.glow {
color: #fff;
text-shadow:
0 0 5px #8ebf42,
0 0 15px #8ebf42;
}
/* a simple two-tone outline */
.outline {
text-shadow:
1px 1px 0 #1c87c9,
-1px -1px 0 #1c87c9;
}Efectos comunes
| Efecto | Valor de ejemplo | Qué hace |
|---|---|---|
| Sombra paralela sutil | text-shadow: 1px 1px 2px rgba(0,0,0,0.4); | Eleva levemente el texto sobre la página. |
| Resplandor neón | text-shadow: 0 0 8px #0ff, 0 0 16px #0ff; | Dos sombras difusas apiladas del mismo color. |
| Relieve (grabado) | text-shadow: 0 1px 1px rgba(255,255,255,0.6); | Una sombra clara bajo texto oscuro da aspecto de grabado. |
| Legibilidad sobre fotos | text-shadow: 0 1px 3px rgba(0,0,0,0.8); | Un desenfoque oscuro detrás de texto claro mantiene la legibilidad. |
Usa text-shadow para legibilidad y decoración, no como sustituto del contraste real. Las sombras excesivas o de bajo contraste pueden dificultar la lectura para algunos usuarios, así que mantén el contraste entre texto y fondo sólido por sí mismo.
text-shadow vs box-shadow
text-shadow dibuja una sombra alrededor de los glifos (las formas de las letras) del texto, mientras que box-shadow dibuja una sombra alrededor de la caja rectangular de un elemento. Usa text-shadow cuando quieras que la sombra siga el contorno de los caracteres, y box-shadow para tarjetas, botones y otros elementos en caja.
Valores
| Valor | Descripción |
|---|---|
h-shadow | El desplazamiento horizontal (eje x). Un valor positivo dibuja la sombra a la derecha; uno negativo, a la izquierda. |
v-shadow | El desplazamiento vertical (eje y). Un valor positivo dibuja la sombra debajo del texto; uno negativo, encima. |
blur-radius | Define qué tan grande y difusa es la sombra. No se permiten valores negativos. El valor predeterminado es 0. |
color | El color de la sombra. Se pueden usar nombres de color, códigos hex, rgb(), rgba(), hsl() y hsla(). |
none | No se aplica ninguna sombra. Este es el valor predeterminado de la propiedad. |
initial | Establece la propiedad en su valor predeterminado (none). |
inherit | Hereda la propiedad del elemento padre. |
Compatibilidad con navegadores y propiedades relacionadas
text-shadow es compatible con todos los navegadores modernos. La sombra no afecta al diseño: se pinta fuera de la caja y nunca cambia el tamaño del elemento ni la posición del contenido circundante.
Lectura relacionada: box-shadow, color, opacity, text-decoration, y los pseudoelementos ::first-letter y ::first-line a los que también se aplica text-shadow.