Gerador de Sombra de Texto CSS
Crie efeitos de sombra de texto multicamada visualmente com pré-visualização ao vivo.
① Ajuste offset e blur por camada ② Adicione múltiplas camadas ③ Copie o CSS
Predefinições:
Sombra 1
2px
2px
4px
30%
Código CSS
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
O que é CSS text-shadow?
A propriedade CSS text-shadow adiciona uma ou mais sombras ao texto. Cada sombra é definida por deslocamento X, Y, raio de desfoque e cor — ex. text-shadow: 2px 2px 4px rgba(0,0,0,0.5). Múltiplas camadas separadas por vírgulas criam efeitos complexos como glow e neon.
Perguntas Frequentes
CSS text-shadow adiciona efeitos de sombra ao texto. Cada sombra requer deslocamento X, Y, raio de desfoque e cor. Múltiplas sombras separadas por vírgulas criam efeitos em camadas.
Sim. CSS text-shadow aceita uma lista de sombras separadas por vírgulas. Cada sombra é aplicada em ordem, com a primeira aparecendo no topo.
O raio de desfoque controla quão difusa é a sombra. Um valor de 0 dá uma sombra nítida. Valores maiores criam sombras mais suaves.
Use quatro sombras com desfoque 0, cada uma deslocada em uma direção: text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black.
Empilhe múltiplas sombras com deslocamentos X e Y crescentes da mesma cor: text-shadow: 1px 1px #aaa, 2px 2px #aaa, 3px 3px #aaa.
Text-shadow é acelerado por GPU em navegadores modernos. Raios de desfoque grandes em texto muito longo podem afetar o desempenho em dispositivos low-end.
CSS text-shadow é suportado por todos os navegadores modernos desde 2010. Nenhum prefixo de fornecedor é necessário.