Como adicionar sombras em textos com CSS

Sombras em textos produzem um efeito de relevo muito interessante e melhoram o visual da página mas, nem sempre contribuem para facilitar a leitura do texto, pelo contrário, dependendo das cores e do tipo de sombra, a leitura fica prejudicada. Veja o texto abaixo:

Texto sombreado com CSS.

Não tem uma aparência muito agradável, não é verdade? Nesta postagem vamos aprender a colocar sombras em texto e, também, como deixá-lo com uma aparência melhor e mais fácil de ler. Abaixo temos o código CSS deste exemplo:

.shadow_1 {
    clear: both;
    text-align: center;
    color: #000000;
    font-family: Georgia;
    font-size: 32px;
    font-weight: bold;
    font-variant: small-caps;
    font-style: italic;
    margin: auto;
    border-radius: 12px;
    padding: 10px 10px 20px 10px;
    text-shadow: 8px 6px 3px rgba(0, 0, 0, 0.8);
}

A parte do código que gera a sombra é a linha em destaque acima. Vamos ver o que significam os números depois de text-shadow::

text-shadow: 8px /*Deslocamento horizontal da sombra em pixels (eixo X)*/ 6px 3px rgba(0, 0, 0, 0.8);

Números positivos deslocam a sombra para a direita e negativos para a esquerda.

text-shadow: 8px 6px /*Deslocamento vertical da sombra em pixels (eixo Y)*/ 3px rgba(0, 0, 0, 0.8);

Números positivos deslocam a sombra para baixo e negativos para cima.

text-shadow: 8px 6px 3px /*Espalhamento da sombra*/ rgba(0, 0, 0, 0.8);

Com 0px a sombra não é espalhada e aparece como um texto comum ao lado do outro. Aumentando-se este número, a sombra fica cada vez difusa.

text-shadow: 8px 6px 3px rgba(0, 0, 0, 0.8) /*Cor da sombra*/;

Neste caso temos a cor preta com 0,8 (80%) de opacidade. Além do código rgba, podemos utilizar outras codificações para a cor, hexadecimal, por exemplo. Se não especificamos a cor, ela assume a cor do texto.

Mas como melhorar a aparência do texto do exemplo? Podemos colocar cores diferentes, com alto contraste, para a fonte, sombra e background. Veja abaixo:

Texto sombreado com CSS.

O código ficou assim:

.shadow_2 {
    clear: both;
    text-align: center;
    color: #ffffff;
    font-family: Georgia;
    font-size: 32px;
    font-weight: bold;
    font-variant: small-caps;
    font-style: italic;
    margin: auto;
    border-radius: 12px;
    padding: 10px 10px 20px 10px;
    background-color: #ee1133;
    text-shadow: 8px 6px 3px rgba(0, 0, 0, 0.8);
}

Melhorou, mas pode ser ainda melhor:

Texto sombreado com CSS.

Neste último exemplo temos, além das modificações feitas anteriormente, uma imagem semitransparente, de aparência granulada, como background e duas sombras: uma igual a dos exemplos anteriores e outra próxima (1 pixel) do texto. Veja o código:

.shadow_3 {
    clear: both;
    text-align: center;
    color: #ffffff;;
    font-family: Georgia;
    font-size: 32px;
    font-weight: bold;
    font-variant: small-caps;
    font-style: italic;
    margin: auto;
    border-radius: 12px;
    padding: 10px 10px 20px 10px;
    background: #ee1133 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJFTzS0GYLIBI9jPoXg9fczjT5Rn79w-GzHrBDbp5l_SIk6iSwEkkU4VALHCCve_cV5CBtzZhf4T3kCJPlAF8nVqjRv4xDvfSats7rkT9KHqCV0v6Odh4A9wHrNWyV898ncKbxPKPrsEs/s300/body_background.png) repeat scroll top left;
    text-shadow: 8px 6px 3px rgba(0, 0, 0, 0.8), 1px 1px 0px #000000;
}

Mas porque utilizar uma imagem semitransparente? Assim podemos alterar a cor do background sem ter que substituir a imagem. Basta substituir o código da cor em vermelho acima.

Texto sombreado com CSS.

Como vimos nestes exemplos simples, as possibilidades são muitas e com um pouco criatividade podemos chegar a resultados realmente fantásticos.

O autor
Juarez Pereira
Unaí - MG, Brasil
Visualizar meu perfil completo