Gerador de Sombra de Texto CSS
Projete visualmente efeitos CSS text-shadow com múltiplas camadas. Ajuste offset, blur, cor e opacidade. Copie o CSS instantaneamente.
Texto de Pré-visualização
Tamanho da Fonte — 48px
Cor do Texto
Cor de Fundo
Camadas de Sombra (1)
Deslocamento X
Deslocamento Y
Desfoque
Cor
Opacidade — 30%
CSS Gerado
text-shadow: 2px 2px 6px rgba(0,0,0,0.30);
Sobre esta ferramenta
O Gerador de Sombra de Texto CSS permite compor visualmente sombras de texto em múltiplas camadas e obter instantaneamente a saída CSS. Cada camada tem controles independentes de deslocamento X/Y, raio de desfoque, cor e opacidade.
A opacidade é aplicada como canal alfa RGBA, proporcionando transparência suave sem hacks específicos do navegador. O CSS gerado funciona em todos os navegadores modernos.
Como usar
- Selecione um preset para começar, ou configure as camadas manualmente.
- Digite o texto de pré-visualização e ajuste o tamanho da fonte e as cores.
- Adicione mais camadas com + Adicionar Camada para efeitos complexos.
- Clique em Copiar CSS para copiar a declaração text-shadow diretamente na sua folha de estilos.
Casos de uso
Desenvolvedores frontend criam cabeçalhos de seção hero com profundidade. Designers criam protótipos de efeitos de texto em CSS. Equipes de marketing criam texto CTA chamativo com brilhos e efeitos neon.
Perguntas frequentes
- Quantas camadas posso adicionar? — Não há limite. O CSS suporta qualquer número de valores text-shadow separados por vírgulas. Na prática, 1-4 camadas cobrem a maioria dos efeitos.
- O text-shadow funciona em todos os navegadores? — Sim. text-shadow tem sido totalmente suportado em todos os navegadores modernos desde 2012.
- O que é raio de desfoque 0? — Uma sombra de borda dura sem desfoque, útil para efeitos retro ou de contorno.