Sombra de texto de CSS

Sombra de texto

text-shadow Atributo que agrega una sombra al texto.

La forma más simple es especificar solo la sombra horizontal (2px) y la sombra vertical (2px):

Efecto de sombra de texto!

Ejemplo

h1 {
  text-shadow: 2px 2px;
}

Prueba por ti mismo

A continuación, agrega un color (rojo) a la sombra:

Efecto de sombra de texto!

Ejemplo

h1 {
  text-shadow: 2px 2px red;
}

Prueba por ti mismo

Luego, agrega un efecto borroso a la sombra (5px):

Efecto de sombra de texto!

Ejemplo

h1 {
  text-shadow: 2px 2px 5px red;
}

Prueba por ti mismo

Consejo:Por favor, visita Fuente de CSS Un capítulo, aprende a cambiar la fuente, el tamaño del texto y el estilo del texto.

Consejo:Por favor, visita Efectos de texto de CSS Un capítulo, aprende a implementar diferentes efectos de texto.

Todos los atributos de texto CSS

Atributo Descripción
color Configura el color del texto.
direction Especifica la dirección / dirección de escritura del texto.
letter-spacing Configura el espacio entre caracteres.
line-height Configura la altura de las líneas.
text-align Especifica el modo de alineación horizontal del texto.
text-decoration Especifica el efecto decorativo aplicado al texto.
text-indent Especifica el desplazamiento del primer renglón del bloque de texto.
text-shadow Especifica el efecto de sombra aplicado al texto.
text-transform Controla el tamaño de las mayúsculas y minúsculas del texto.
text-overflow Especifica cómo indicar al usuario el contenido que se ha truncado.
unicode-bidi Usado junto con la propiedad direction, configura o devuelve si se debe sobrescribir el texto para soportar varios idiomas en el mismo documento.
vertical-align Especifica el modo de alineación vertical del texto.
white-space Especifica cómo manejar los espacios en blanco dentro de los elementos.
word-spacing Configurar el espacio entre palabras.