⭐ 0
🔍
Texto Imagem PDF e Documentos Áudio Música Eletrônica Tempo Utilitários Validadores Esoterismo Jogos

Gerador de Efeitos de Texto CSS

Escreva o seu texto e veja ao vivo efeitos CSS de néon, extrusão 3D, letterpress, contorno e preenchimento com gradiente, com parâmetros calculados matematicamente e um bloco de CSS pronto a copiar.

🔒 Processado inteiramente em seu navegador – nada que você digita aqui é carregado.

A processar... 0%

Resultado

A maioria das galerias de efeitos de texto em CSS oferece um preset fixo: um néon, uma extrusão 3D, é pegar ou largar. Este gerador constrói o CSS a partir dos seus parâmetros, no texto que realmente escreveu. Escolha néon, extrusão 3D, letterpress/relevo, contorno ou preenchimento com gradiente no seletor de efeitos, ajuste os controlos próprios desse efeito e a pré-visualização, juntamente com o CSS copiável abaixo dela, atualizam-se a cada alteração.

O efeito de extrusão 3D merece uma explicação: para uma profundidade escolhida (número de camadas empilhadas) e um ângulo, a camada i é deslocada horizontalmente i × cos(ângulo) e verticalmente i × sen(ângulo), calculado em JavaScript com as funções trigonométricas reais — não vem de uma tabela de valores predefinidos. A 45 graus, os deslocamentos horizontal e vertical de cada camada são iguais, porque o cosseno e o seno de 45° têm o mesmo valor; rode o controlo de ângulo e veja toda a pilha de text-shadow rodar à volta das letras em tempo real, com cada camada um pouco mais escura que a anterior para simular uma face 3D iluminada.

O néon empilha quatro camadas de text-shadow com raios de desfoque crescentes na cor escolhida, com uma tremulação opcional: ative-a e uma regra @keyframes com uma sequência aleatória de quebras de opacidade é gerada e animada ao vivo, e um botão de aleatoriedade permite gerar um novo padrão sem escrever uma única keyframe manualmente. O texto com contorno aplica -webkit-text-stroke para os browsers que o suportam, mais um fallback honesto com 8 text-shadows direcionais para os que não suportam — ambas as linhas vão no CSS copiado com uma nota a explicar porquê. O preenchimento com gradiente recorta um linear-gradient no formato do texto com background-clip: text, hoje uma propriedade padrão com amplo suporte, mantendo a linha prefixada -webkit- para motores mais antigos.

Tudo é processado localmente no seu browser — nenhum texto que escreva é alguma vez enviado para lado nenhum. Copie o bloco de CSS final, incluindo a regra @keyframes quando o efeito a exigir, diretamente para a sua folha de estilos.

Está a gostar desta ferramenta? Acha este produto útil? Vê potencial nele e quer apoiá-lo?

🛡️
Executado no Navegador

Os seus ficheiros e dados nunca saem deste dispositivo. O processamento é totalmente offline. 100% Seguro.

Formatos Aceites e Regras

  • Cinco efeitos reais — néon, extrusão 3D, letterpress/relevo, contorno e preenchimento com gradiente — cada um com os seus controlos de parâmetros (cores, profundidade/ângulo, paragens do gradiente).
  • O néon inclui uma animação opcional de tremulação, com um padrão de opacidade aleatório definido em @keyframes, que pode ser regenerado sem mexer no CSS manualmente.
  • Na extrusão 3D, pode arrastar independentemente a profundidade (número de camadas) e o ângulo; o deslocamento em píxeis de cada camada e o seu tom progressivamente mais escuro recalculam-se em tempo real.

Principais Vantagens

✓ A profundidade da extrusão 3D é calculada com trigonometria real — o deslocamento de cada camada é cos(ângulo) e sen(ângulo) vezes a sua distância — por isso, alterar o ângulo roda toda a extrusão exatamente como numa letra 3D real.
✓ Cada efeito é pré-visualizado em tempo real no texto que escreve, para poder avaliar a legibilidade e o contraste antes de copiar o código.
✓ O CSS copiável é transparente quanto à compatibilidade: os efeitos de contorno e preenchimento com gradiente incluem uma linha de fallback padrão, a par da propriedade específica do WebKit, com uma nota a explicar porquê.

Casos de Uso

  • • Crie um efeito de letreiro neon para o título de uma landing page, ative a animação de cintilação aleatória e copie o bloco text-shadow e @keyframes prontos.
  • • Defina a profundidade da extrusão 3D para 8 e o ângulo para 30 graus para obter um logotipo isométrico robusto e, em seguida, copie a pilha de text-shadow calculada diretamente para a sua folha de estilos.
  • • Crie títulos com contorno incluindo tanto a linha -webkit-text-stroke quanto seu fallback com text-shadow, para que o contorno também apareça em navegadores sem suporte a stroke.