Como Adicionar Sombra no Texto do Blog?

CONSIDERAÇÕES INICIAIS

Nesse tutorial, confira como adicionar o efeito da sombra no texto de alguns elementos do seu blog, deixando a aparência visual mais sofisticada. Esse efeito pode ser adicionado no título e no texto das postagens, no título dos widgets, no texto do rodapé, entre outros elementos.

Esse tutorial é indicado para os blogs que utilizam o tema Awesome Inc. ou Espetacular Ltda na plataforma do Blogger. Para baixar um modelo no tema Awesome, clique aqui.

Antes de realizar qualquer um dos procedimentos a seguir, primeiramente faça um backup do seu blog. Se ocorrer algum problema durante o procedimento, o blog poderá ser restaurado com o arquivo do backup realizado. Se tiver alguma dúvida sobre o backup, clique aqui.

 

COMO ADICIONAR SOMBRA NO TEXTO DO TÍTULO DA POSTAGEM?

Confira como adicionar o efeito da sombra no título das postagens do seu blog em 11 passos:

1º Passo: acesse a página inicial do Blogger.

2º Passo: selecione o nome do seu blog.

3º Passo: clique em Tema.

4º Passo: clique na seta ao lado do botão Personalizar e escolha a opção Editar HTML.

5º Passo: clique em qualquer local dentro do HTML do blog.

6º Passo: no teclado, pressione as teclas CRTL e F para abrir a caixa de pesquisa do HTML.

7º Passo: pesquise pelo trecho abaixo:

h3.post-title, h4 {

Clique aqui para copiar o trecho acima.

8º Passo: clique na frente desse trecho e pressione a tecla Enter para inserir uma linha em branco abaixo desse trecho.

9º Passo: abaixo do trecho pesquisado, escreva o código: text-shadow: 0px 0px 10px #ffffff;

Clique aqui para copiar o código acima.

Confira como o código era:

h3.post-title, h4 {   font: $(post.title.font);

Confira como o código vai ficar:

h3.post-title, h4 { text-shadow: 0px 0px 10px #fff;   font: $(post.title.font);

10º Passo: clique em visualizar para conferir o resultado.

11º Passo: para finalizar, clique em Salvar.

 

No código text-shadow: 0px 0px 10px #ffffff; o termo text-shadow significa sombra de texto. O primeiro valor indica a distância horizontal da sombra em relação ao texto (0px), enquanto o segundo valor indica a distância vertical da sombra (0px). O terceiro valor indica o tamanho do brilho da sombra (10px). O código hexadecimal (#ffffff) indica a cor da sombra.

Para aumentar a distância horizontal entre a sombra e o texto, aumente o primeiro valor que aparece no código (text-shadow: 0px 0px 10px #ffffff;). O valor positivo indica a distância depois do texto (5px), enquanto o valor negativo indica a distância antes do texto (-5px). Quanto maior o número, maior a distância, conforme os exemplos a seguir:

Sombra alinhada com o texto: text-shadow: 0px 0px 10px #ffffff;

Sombra depois do texto: text-shadow: 2px 0px 10px #ffffff;

Sombra antes do texto: text-shadow: -2px 0px 10px #ffffff;

Para aumentar a distância vertical entre a sombra e o texto, aumente o segundo valor que aparece no código (text-shadow: 0px 0px 10px #ffffff;). O valor positivo aumenta a distância abaixo do texto (5px), enquanto o valor negativo aumenta a distância acima do texto (-5px), conforme os exemplos a seguir:

Sombra alinhada com o texto: text-shadow: 0px 0px 10px #ffffff;

Sombra abaixo do texto: text-shadow: 0px 15px 10px #ffffff;

Sombra acima do texto: text-shadow: 0px -15px 10px #ffffff;

Para aumentar o brilho da sombra, aumente o terceiro valor que aparece no código (text-shadow: 0px 0px 10px #ffffff;). Quanto maior o valor, maior o brilho, conforme os exemplos a seguir:

Sombra sem brilho: text-shadow: 0px 2px 0px #ffffff;

Sombra com brilho médio: text-shadow: 0px 0px 10px #ffffff;

Sombra com brilho alto: text-shadow: 0px 0px 20px #ffffff;

Para alterar a cor da sombra, deve alterar o código #ffffff pelo código hexadecimal da cor desejada. Abaixo, segue outros exemplos de códigos hexadecimais de cores:

#ffffff: branco.

#000000: preto.

#00a2ff: azul claro.

#2400ff: azul escuro

#00ff7e: verde claro.

#13b107: verde escuro.

#ff0000: vermelho.

#ff7e00: laranja.

#fe60e6: rosa.

#ffde00: amarelo.

Clique aqui para obter mais códigos hexadecimais de cores para o rodapé do seu blog.

Dica: utilize a ferramenta de cor dos aplicativos Adobe Photoshop ou Gimp para obter o código hexadecimal de qualquer cor desejada.

COMO ADICIONAR SOMBRA NO TEXTO DA POSTAGEM?

Para adicionar o efeito da sombra no texto das postagens do seu blog, deve realizar o mesmo procedimento do título das postagens, alterando apenas o sétimo passo.

7º Passo: pesquise pelo trecho abaixo:

.post-body {

Clique aqui para copiar o trecho acima.

Observação: se na pesquisa aparecer mais de um resultado, pode ser considerado apenas o primeiro.

Abaixo do trecho pesquisado, escreva o código: text-shadow: 0px 0px 10px #ffffff;

Confira como o código era:

.post-body {   position: relative;

Confira como o código vai ficar:

.post-body { text-shadow: 0px 10px 0px #ff0000;   position: relative;

 

COMO ADICIONAR SOMBRA NO TÍTULO DO BLOG?

Para adicionar o efeito da sombra no texto do título principal do seu blog, deve realizar o mesmo procedimento do título das postagens, alterando apenas o sétimo passo.

7º Passo: pesquise pelo trecho abaixo:

.header-outer {

Clique aqui para copiar o trecho acima.

Abaixo do trecho pesquisado, escreva o código: text-shadow: 0px 0px 10px #ffffff;

Confira como o código era:

/* Header ----------------------------------------------- */ .header-outer {   margin: $(header.margin.top) 0 $(header.margin.bottom) 0;

Confira como o código vai ficar:

/* Header ----------------------------------------------- */ .header-outer { text-shadow: 0px 10px 0px #ff0000;   margin: $(header.margin.top) 0 $(header.margin.bottom) 0;

 

COMO ADICIONAR SOMBRA NO TÍTULO DOS WIDGETS?

Para adicionar o efeito da sombra no título dos widgets do seu blog, deve realizar o mesmo procedimento do título das postagens, alterando apenas o sétimo passo.

7º Passo: pesquise pelo trecho abaixo:

.main-inner .widget h2 {

Clique aqui para copiar o trecho acima.

Observação: se na pesquisa aparecer mais de um resultado, o primeiro corresponde a versão web e o segundo a versão mobile. O efeito pode ser adicionado tanto em uma delas, quanto em ambas.

Abaixo do trecho pesquisado, escreva o código: text-shadow: 0px 0px 10px #ffffff;

Confira como o código era:

.main-inner .widget h2 {   margin: 0 -$(separator.outdent);

Confira como o código vai ficar:

.main-inner .widget h2 { text-shadow: 0px 0px 10px #ffffff;   margin: 0 -$(separator.outdent);

 

COMO ADICIONAR SOMBRA NO TÍTULO DOS WIDGETS DO RODAPÉ?

Para adicionar o efeito da sombra no título dos widgets do rodapé, deve realizar o mesmo procedimento do título das postagens, alterando apenas o sétimo passo.

7º Passo: pesquise pelo trecho abaixo:

.footer-inner .widget h2 {

Clique aqui para copiar o trecho acima.

Observação: se na pesquisa aparecer mais de um resultado, o primeiro corresponde a versão web e o segundo a versão mobile.

Abaixo do trecho pesquisado, escreva o código: text-shadow: 0px 0px 10px #ffffff;

Confira como o código era:

.footer-inner .widget h2 {   padding: 0 0 .4em;

Confira como o código vai ficar:

.footer-inner .widget h2 { text-shadow: 0px 0px 10px #ffffff;   padding: 0 0 .4em;

 

COMO ADICIONAR SOMBRA NO RODAPÉ DO BLOG?

Para adicionar o efeito da sombra no texto de todo o rodapé do seu blog, deve realizar o mesmo procedimento do título das postagens, alterando apenas o sétimo passo.

7º Passo: pesquise pelo trecho abaixo:

.footer-outer {

Clique aqui para copiar o trecho acima.

Abaixo do trecho pesquisado, escreva o código: text-shadow: 0px 0px 10px #ffffff;

Confira como o código era:

/* Footer ----------------------------------------------- */ .footer-outer {   margin: -$(shadow.spread) 0 -1px;

Confira como o código vai ficar:

/* Footer ----------------------------------------------- */ .footer-outer { text-shadow: 0px 0px 10px #ffffff;   margin: -$(shadow.spread) 0 -1px;

 

CONSIDERAÇÕES FINAIS

Dessa forma, utilizando o código text-shadow: 0px 0px 10px #ffffff; é possível adicionar o efeito no texto de diversos elementos do blog, conforme resumo a seguir.

Para adicionar a sombra no texto dos títulos das postagens, incluir o código citado abaixo de:

h3.post-title, h4 {

Para adicionar a sombra no texto das postagens, incluir o código citado abaixo de:

.post-body {

Para adicionar a sombra no título principal do blog, incluir o código citado abaixo de:

.header-outer {

Para adicionar a sombra no título dos widgets, incluir o código citado abaixo de:

.main-inner .widget h2 {

Para adicionar a sombra no título dos widgets do rodapé, incluir o código citado abaixo de:

.footer-inner .widget h2 {

Para adicionar a sombra no texto de todo rodapé, incluir o código citado abaixo de:

.footer-outer {

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos sobre a aplicação do efeito da sombra no texto de alguns elementos do blog, incluindo o título da postagem, o título principal, o texto da postagem e o texto do rodapé.

 

Por: Santos. Elaborado em: 05/12/2025. Publicado em: 05/12/2025. Atualizado em: 05/12/2025. Obrigado pela sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou entre em contato conosco.