Propiedad text-shadow de CSS

La propiedad CSS text-shadow se utiliza para agregar sombras al texto. Puedes elegir colores desde aquí: Colores HTML.

La propiedad text-shadow es una de las propiedades CSS3.

Cada sombra se especifica mediante 2 o 3 valores de longitud y un <color> opcional. El primer valor establece la distancia horizontal (desplazamiento x), el segundo valor establece la distancia vertical (desplazamiento y), el tercer valor establece el radio de desenfoque y el valor de color establece el color de la sombra.

INFO

El desplazamiento x y el desplazamiento y son obligatorios, el tercer valor es opcional.

Valor inicial	none
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredado	Sí.
Animable	Sí.
Versión	CSS3
Sintaxis DOM	object.style.textShadow = "1px 3px 3px #8ebf42";

Sintaxis

Sintaxis de la propiedad text-shadow de CSS

css

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

html

<!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>

Try it Yourself »

Resultado

CSS text-shadow Property

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 el x-offset, y-offset, blur-radius y color

html

<!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>

Try it Yourself »

Valores

Valor	Descripción	Probar
h-shadow	El desplazamiento horizontal de la sombra. Si es positivo, la sombra se dibuja a la derecha del texto; si es negativo, a la izquierda.	Probar »
v-shadow	El desplazamiento vertical de la sombra (eje y). Si el valor es positivo, la sombra está debajo del texto; si es negativo, se dibuja encima.	Probar »
blur-radius	El radio de desenfoque define qué tan grande y borrosa es la sombra. No se pueden usar valores negativos. El valor predeterminado es 0.	Probar »
color	Permite elegir un color para la sombra. Se pueden usar nombres de colores, códigos hexadecimales, rgb(), rgba(), hsl(), hsla().	Probar »
none	No se especifica ninguna sombra. Este es el valor predeterminado de esta propiedad.	Probar »
initial	Hace que la propiedad utilice su valor predeterminado.	Probar »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuáles de las siguientes afirmaciones son verdaderas sobre la propiedad CSS text-shadow?

La propiedad CSS text-shadow se utiliza para aplicar sombra al texto.La propiedad CSS text-shadow solo puede aplicar un único efecto de sombra.La propiedad CSS text-shadow toma cuatro valores: Sombra Horizontal, Sombra Vertical, Radio de Desenfoque y Color.La propiedad CSS text-shadow no se puede aplicar a texto transparente.Puedes aplicar múltiples sombras usando la propiedad CSS text-shadow especificando cada sombra en formato separado por comas.

Propiedad text-shadow de CSS ​

Sintaxis ​

Ejemplo de la propiedad text-shadow: ​

Resultado ​

Ejemplo de la propiedad text-shadow con los valores “x-offset”, “y-offset”, “blur-radius” y “color”: ​

Valores ​