Gerador de efeitos de texto CSS

A maioria das galerias de efeitos de texto CSS oferece uma predefinição fixa: um brilho neon, uma extrusão 3D, é pegar ou largar. Este gerador cria o CSS a partir de seus parâmetros, no texto que você realmente digita. Escolha brilho neon, extrusão 3D, impressão tipográfica/relevo, contorno ou preenchimento gradiente na seleção de efeitos, ajuste os próprios controles desse efeito e a visualização ao vivo mais o bloco CSS copiável abaixo dele são atualizados a cada alteração.

O efeito de extrusão 3D é aquele que vale a pena entender: para uma profundidade (número de camadas empilhadas) e ângulo escolhidos, a camada i é compensada por i × cos(ângulo) horizontalmente e i × sin(ângulo) verticalmente, calculado em JavaScript com as funções trigonométricas reais - não lidas em uma tabela de consulta de ângulos predefinidos. A 45 graus, os deslocamentos horizontal e vertical são iguais para todas as camadas, porque o cosseno e o seno de 45° têm o mesmo valor; gire o controle deslizante de ângulo e observe toda a pilha de camadas de `sombra de texto` girar em torno das letras em tempo real, cada uma escurecida um pouco mais que a anterior para fingir um rosto 3D iluminado.

O brilho neon empilha quatro camadas de 'sombra de texto' com raio de desfoque crescente na cor escolhida, com uma cintilação opcional: ative-o e uma regra `@keyframes` com uma sequência aleatória de quedas de opacidade é gerada e animada ao vivo, e um botão aleatório permite rolar novamente o padrão sem escrever um único quadro-chave à mão. O texto delineado aplica `-webkit-text-stroke` para navegadores que o suportam, além de um substituto honesto `text-shadow` de 8 direções para aqueles que não o suportam — ambas as linhas são enviadas no CSS copiado com uma nota sobre o porquê. Gradient-fill recorta um `linear-gradient` na forma do texto com `background-clip: text`, agora uma propriedade padrão com amplo suporte, mantendo a antiga linha prefixada `-webkit-` para mecanismos legados.

Tudo é renderizado localmente no seu navegador – nenhum texto digitado é enviado para lugar nenhum. Copie o bloco CSS finalizado, incluindo a regra `@keyframes` quando o efeito precisar, direto para sua folha de estilo.