Como agrego sombra a un texto con CSS3?

sombra en textos

Text-Shadow es una de las nuevas propiedades en CSS3 que permite estilizar las fuentes. Esta propiedad es la solución a muchos trucos que se idearon para simular sombras en las fuentes de los sitios web.


Esta propiedad actúa a modo gráfico sin duplicar el texto y sin generar una imagen. Los valores para la propiedad Text-shadow tienen varios parámetros, en primera instancia hay que definir el color, luego el eje X e Y de la sombra y el efecto de difuminado. Es una propiedad oficial que funciona eficientemente en Firefox.

Código CSS:

.sombra{
color:#000000;
font:22px Arial, Helvetica, sans-serif;
text-shadow:#CCCCCC 2px 1px 2px; /*Color de la sombra - Eje X - Eje Y - Difuminado*/
}

Código xHtml:

<p class="sombra">Texto con Sombra<p>

Resultado:

sombras-css3

3 respuestas a “Como agrego sombra a un texto con CSS3?”

  1. VhoScript dice:

    Gracias muy buen dato

  2. marcelo dice:

    Buenisimo el tip! muchas gracias!

Deja un comentario