Text Shadow Generator
CSS text shadow
CSS text shadow Executa localmente no seu navegador
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
O Text Shadow Generator define o deslocamento, o desfoque, a cor e a opacidade de uma sombra atrás do texto, com uma visualização ao vivo e CSS. Ao contrário do box-shadow, ele não tem valor de spread, o que surpreende as pessoas: a única maneira de tornar uma sombra de texto mais pesada é empilhar várias sombras em uma declaração. É mais útil para a legibilidade, colocando uma sombra escura sutil atrás do texto claro em uma fotografia, e nunca deve ser o que torna o texto legível, porque desaparece no momento em que o fundo muda.
Where people use the
- Adicionar uma sombra sutil para que a legenda seja lida sobre uma fotografia.
- Fazendo um efeito de título prensado ou gravado.
- Produzindo um tratamento de texto retrô ou neon.
- Testando o quão pesada uma sombra precisa ser antes de parecer barata.
How to use the
- 1
Defina os deslocamentos
O deslocamento X se move para a direita, o deslocamento Y se move para baixo. Um deslocamento de um ou dois pixels é lido como profundidade; qualquer coisa maior começa a parecer uma sombra projetada.
- 2
Defina o desfoque
O desfoque suaviza a borda. Zero fornece uma cópia impressa do texto, que é como os efeitos de contorno e retro são feitos.
- 3
Escolha a cor e a opacidade
Texto escuro em fundos claros deseja uma sombra clara e vice-versa. Mantenha a opacidade baixa, a menos que queira um efeito óbvio.
- 4
Copie o CSS
A regra inclui a cor rgba, pronta para colar.
- 5
Empilhe sombras se precisar de mais peso
Adicione uma segunda sombra separada por vírgula em sua folha de estilo. Essa é a única maneira de engrossar a sombra do texto, já que não há propagação.
Dicas e práticas recomendadas
- Menos é mais: um ou dois pixels com baixa opacidade superam um desfoque intenso.
- Nunca confie apenas em uma sombra para acessibilidade; corrija o contraste por baixo.
- Lembre-se de que a propriedade é herdada, portanto, coloque-a no elemento que você quer dizer.
Perguntas frequentes
Por que não há valor de spread?
Porque text-shadow não suporta um. Sua sintaxe é apenas deslocamento X, deslocamento Y, desfoque e cor. Para simular a propagação, você empilha várias sombras idênticas com deslocamentos ligeiramente diferentes.
Posso usá-lo para tornar o texto legível sobre uma imagem?
Apenas como complemento. Uma sombra ajuda nas margens, mas falha em áreas movimentadas e não conta para a taxa de contraste das WCAG, que é medida em relação à cor de fundo. Adicione uma tela ou um painel sólido se a legibilidade realmente for importante.
Como faço para delinear o texto?
Empilhe quatro sombras com mais e menos um pixel em cada direção com zero desfoque. Isso produz um efeito de contorno sem a necessidade de -webkit-text-stroke, que não é suportado em todos os lugares.
Isso torna a página mais lenta?
Uma única sombra estática não custa quase nada. Animar uma sombra de texto ou aplicar uma sombra grande e desfocada a uma grande quantidade de texto é onde aparece o custo de repintura.
É herdado por elementos filhos?
Sim. A sombra do texto é herdada, portanto, defini-la em um contêiner aplica-a a todos os descendentes com texto, o que às vezes é surpreendente.