text-shadow

Resumen

La propiedad text-shadow agrega sombra al texto. Acepta una lista de sombras separadas por coma, para aplicarlas al texto y a la propiedad text-decorations del elemento.

Cada sombra es especificada como un √≥fset del texto, junto con valores de color y radio de difuminaci√≥n opcionales.

M√ļltiples sombras son aplicadas del frente al fondo, en el mismo orden que sean definidas.

Esta propiedad aplica para los pseudo-elementos ::first-line y ::first-letter.

Valor inicialnone
Applies toall elements. It also applies to ::first-letter and ::first-line.
Heredableyes
Valor calculadoa color plus three absolute lengths
Animation typea shadow list

Sintaxis

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #CCC 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Se usan los valores predeterminados para color y blur-radius */
text-shadow: 5px 10px;

/* Valores globales */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

Valores

<color>
Opcional. Puede ser especificado antes o después de los valores de offset. Si el color no es especificado, se usa el predeterminado del agente usuario.

Nota:

Para asegurar consistencia entre navegadores, se recomienda especificar un color explícito.
<offset-x> <offset-y>
Requeridos. Estos valores length especifican el √≥fset de la sombra del texto. <offset-x> especifica la distancia horizontal; un valor negativo pone la sombra a la izquierda del texto. <offset-y> especifica la distancia vertical; un valor negativo pone la sombra encima del texto. Si ambos valores son 0, la sombra es colocada detr√°s del texto (y puede generar un efecto de difuminado cuando se define el valor <blur-radius>).
Para más detalles de las unidades que se pueden usar, véase length.
<blur-radius>
Opcional. √Čste es un valor length. Si no se especifica, su valor predeterminado es 0. Mientras m√°s alto sea el valor, mayor ser√° la difuminaci√≥n; la sombra se vuelve m√°s amplia y clara.

Sintaxis formal

none | (en-US) <shadow-t># (en-US)

where
<shadow-t> = [ (en-US) <length>{ (en-US)2,3} (en-US) && (en-US) <color>? (en-US) ] (en-US)

where
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )

where
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>

Ejemplos

.red-text-shadow {
   text-shadow: red 0 -2px;
}
<p class="red-text-shadow">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
   inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

.white-with-blue-shadow {
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
   color: white;
   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}
<p class="white-with-blue-shadow">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

.gold-on-gold {
   text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
   rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
   rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px;
   color: gold;
   background: gold;
}
<p class="gold-on-gold">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

Especificaciones

Especificación Estado Comentarios
CSS Transitions
La definición de 'text-shadow' en esta especificación.
Working Draft Incluye text-shadow en la lista de propiedades que pueden ser animadas.
CSS Text Decoration Module Level 3
La definición de 'text-shadow' en esta especificación.
Candidate Recommendation La propiedad CSS text-shadow fue inadecuadamente definida en CSS2 y descartada en CSS2 (Nivel 1). La especificaci√≥n del M√≥dulo de Textos Nivel 3 de CSS mejor√≥ y clarific√≥ la sintaxis. M√°s adelante fue movido al nuevo borrador de trabajo del M√≥dulo de Textos Nivel 3 de CSS.

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte b√°sico 2.0 3.5 (1.9.1)[1] 10[3] 9.5[2] 1.1 (100)[4]
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte b√°sico ? ? ? ? ?

[1] Gecko te√≥ricamente soporta sombras de texto infinitas (no lo intente). Gecko 2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) y superiores limitan el radio de difuminaci√≥n a 300 por razones de rendimiento. Si el valor <color> no es especificado, Gecko usar√° el valor de la propiedad color del elemento.

[2] Opera soporta un m√°ximo de 6-9 sombras de texto por motivos de rendimiento. El radio de difuminaci√≥n est√° limitado a 100px. Opera 9.5 a 10.1 utiliza el antiguo orden en reversa de dibujado (CSS2, la primera sombra en aplicar es la √ļltima que se define).

[3] Internet Explorer 5.5 soporta la propiedad Shadow and DropShadow Filter de Microsoft.

[4] En Safari, cualquier sombra que no especifique expl√≠citamente un color es transparente. Safari 1.1 a 3.2 s√≥lo soportan una sombra de texto (muestra la primera definida en la propiedad e ignora al resto). Safari 4.0 (WebKit 528) y superiores soportan m√ļltiples sombras de texto.
Konqueror soporta sombras de texto desde la versi√≥n 3.4.

Véase también