Gerador de Text Shadow CSS
Gerador online gratuito de text-shadow CSS. Empilhe várias camadas de sombra com deslocamento, desfoque, cor e opacidade, teste presets como Neon, 3D ou Retrô e copie o CSS na hora.
O que é a propriedade text-shadow do CSS?
text-shadow adiciona efeitos de sombra aos glifos do texto. Cada sombra é definida por um deslocamento horizontal, um vertical, um raio de desfoque opcional e uma cor, e várias sombras podem ser combinadas em um único valor separado por vírgulas para criar efeitos ricos.
Como funcionam as várias camadas de sombra?
As camadas são desenhadas de baixo para cima na ordem em que são declaradas, então a primeira sombra da lista aparece sobre as outras. Este gerador permite adicionar, remover, ativar e desativar camadas, cada uma com seu próprio deslocamento, desfoque, cor e opacidade para empilhar efeitos como Neon ou 3D.
O que significam deslocamento X, deslocamento Y e desfoque?
O deslocamento X move a sombra para esquerda ou direita dos glifos, o Y move para cima ou para baixo, e o raio de desfoque suaviza suas bordas: 0 dá uma borda dura como nos estilos Retrô ou Contorno, enquanto valores maiores espalham a cor como um brilho.
Como criar um efeito neon?
Use o preset Neon ou configure várias camadas com deslocamento zero, a mesma cor viva e valores de desfoque crescentes, por exemplo 0 0 3px, 0 0 8px e 0 0 20px. Os halos empilhados simulam o brilho de um tubo de neon.
O text-shadow afeta o desempenho de renderização?
Algumas camadas estáticas são baratas, mas texto com muitas sombras de desfoque grande custa mais para repintar. Aplicar sombras pesadas a parágrafos longos ou animar text-shadow continuamente pode causar quedas de quadros em dispositivos móveis ou de entrada; prefira títulos curtos, desfoques moderados ou anime a opacidade.
Como deixar a sombra semitransparente?
Cada camada tem um controle de opacidade que converte a cor escolhida em notação rgba, por exemplo rgba(0, 0, 0, 0.5). Sombras semitransparentes se misturam com qualquer plano de fundo, como o preset Papel usa para um visual de letterpress suave.
Qual a diferença entre text-shadow e box-shadow?
text-shadow se aplica à forma dos glifos do texto e não tem valores de expansão nem interno, enquanto box-shadow envolve a caixa retangular de qualquer elemento. Compartilham a sintaxe de deslocamento e desfoque, mas um não substitui o outro.
Quais navegadores suportam text-shadow?
text-shadow é suportado por todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e Opera, e está estável sem prefixos há mais de uma década. Sombras em múltiplas camadas funcionam igualmente em todos.
O que escrevo é enviado para algum servidor?
Não. O texto de pré-visualização e todas as camadas que você configurar permanecem no seu navegador e o CSS é gerado localmente na página. Nada é enviado pela rede, então a ferramenta também funciona offline depois de carregada.
Como usar Gerador de Text Shadow CSS
Projete sombras de texto CSS empilhando camadas em vez de adivinhar um único deslocamento. Cada mudança renderiza em um grande texto de pré-visualização ao vivo, e o CSS é gerado localmente no seu navegador.
- Digite suas próprias palavras no campo Texto de pré-visualização para testar o efeito em texto real.
- Experimente um predefinido: Neon, Papel, 3D, Retrô, Brilho ou Contorno carrega camadas prontas.
- Ajuste o deslocamento X, o deslocamento Y, o desfoque, a cor e a opacidade de cada camada com seus controles.
- Use Adicionar camada para empilhar mais sombras, desmarque uma camada para desativá-la, ou exclua-a com o ícone da lixeira.
- Copie a regra text-shadow gerada e cole no seu folha de estilos.
Brilhos de neon ficam melhores com três ou quatro camadas da mesma cor e desfoque crescente — mantenha os deslocamentos em zero e deixe o desfoque fazer o trabalho.
Ferramentas relacionadas
- Gerador de Box Shadow CSS Gerador online gratuito de box-shadow CSS. Crie sombras bonitas visualmente com deslocamento, desfoque, expansão, cor e inserção ajustáveis. Visualização ao vivo e cópia instantânea.
- Gerador de Gradientes CSS Crie gradientes CSS impressionantes visualmente. Gere gradientes lineares, radiais e cônicos com múltiplas paradas de cor, ângulos e posições. Copie código CSS pronto para produção instantaneamente.
- Gerador de Letras Estilizadas Gerador de letras estilizadas gratuito com 28 estilos Unicode. Crie texto em negrito, itálico, gótico e circulado para bios do Instagram, TikTok, WhatsApp e nicks de jogos.
- Gerador de Border Radius Criativo Gerador de border radius criativo gratuito online. Arraste 8 pontos ou escolha uma forma blob para criar figuras CSS orgânicas e copiar o código na hora.
- Conversor de Cor Conversor de cor online gratuito. Converta formatos HEX, RGB, HSL, HSV instantaneamente com seletor visual. 100% privado, funciona no seu navegador.
- Gerador de Easing CSS Gerador online gratuito de easing CSS. Arraste os pontos de controle do cubic-bezier em uma curva interativa, escolha entre 18 presets, veja uma animação de bola em loop e copie a função de temporização na hora.
- Gerador de Clip Path CSS Gerador online gratuito de clip-path CSS. Crie formas polygon, circle, ellipse e inset com pontos arrastáveis, visualização ao vivo e cópia do código CSS em um clique.
- Embelezador CSS Formate e embeleze código CSS instantaneamente. Converta CSS minificado em código legível e bem indentado com opções personalizáveis.