Sombras de texto (text-shadow)

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.

La propiedad text-shadow agrega sombra al texto, esta propiedad acepta una lista de sombras separadas por comas que se aplicarán al texto.

text-shadow: h-shadow v-shadow blur-radius color none

Valores de propiedad

  • h-shadow  La posición de la sombra horizontal. Se permiten valores negativos es un valor obligarorio
  • v-shadow  La posición de la sombra vertical. Se permiten valores negativos es un valor obligarorio
  • blur-radius El radio de desenfoque. El valor predeterminado es 0 es un valor opcional
  • color El color de la sombra. Mire los valores de color de CSS para obtener una lista completa de posibles valores de color es un valor opcional
  • none Valor por defecto. Sin sombra

Nota: Internet Explorer 9 y versiones anteriores no admiten la propiedad text-shadow.

Ejemplos

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text-shadow en un texto blanco</h1>
</body>
</html>

El código anterior mostrará

Text-shadow en un texto blanco

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
   text-shadow: 0 0 3px #FF0000;;
}
</style>
</head>
<body>
<h1>Text-shadow con brillo de neón rojo</h1>
<p><b>

El código anterior mostrará

Text-shadow con brillo de neón rojo

<!DOCTYPE html>
<html>
<head>
<style>
     text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
</style>
</head>
<body>
<h1>Text-shadow con brillo de neón rojo y azul</h1>
<p><b>

El código anterior mostrará

Text-shadow con brillo de neón rojo

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

Es importante tener en cuenta que esta propiedad no la soporta el Internet Explorer 9.