Propiedad text-shadow

La propiedad text-shadow establece una sombra para el texto. Como valor, la propiedad acepta 4 parámetros, enumerados separados por espacios, o la palabra clave none, que elimina la sombra por completo (este es el valor por defecto).

Sintaxis

selector {
	text-shadow: desplazamiento_x desplazamiento_y desenfoque color;
}

selector {
	text-shadow: none;
}

Parámetros

Parámetro	Descripción
desplazamiento por x	Define el desplazamiento de la sombra en el eje X. Un valor positivo desplaza hacia la derecha, un valor negativo hacia la izquierda.
desplazamiento por y	Define el desplazamiento de la sombra en el eje Y. Un valor positivo desplaza hacia abajo, un valor negativo hacia arriba.
desenfoque	Define el desenfoque de la sombra. Cuanto mayor sea el valor, más difuminada será la sombra. Parámetro opcional. Si no se especifica, la sombra será nítida.
color	Define el color de la sombra en cualquier unidad de color. Parámetro opcional. Si no se especifica, el color de la sombra será el mismo que el color del texto.

Los desplazamientos en los ejes y el desenfoque se definen en cualquier unidad de tamaño, excepto porcentajes.

Ejemplo

Vamos a desplazar la sombra hacia abajo y hacia la izquierda y añadiremos un pequeño desenfoque:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 5px 5px 3px black;
}

Ejemplo . Sombra nítida

Y ahora hagamos la sombra de color rojo, desplazémosla hacia abajo y hacia la izquierda, pero eliminemos el desenfoque - la sombra será nítida:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 10px 10px red;
}

Ejemplo . Sombra uniforme

Ahora la sombra no está desplazada, pero se le ha añadido desenfoque:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 0px 0px 3px black;
}

Véase también

la propiedad box-shadow,
que establece una sombra para el contenedor