Gerador de Efeito Glitch de Texto CSS
Gere um efeito glitch de texto CSS animado — divisão RGB cromática, faixas cortadas, tremida ou cintilação — com seu próprio texto, cores, tamanho, intensidade e velocidade. Copie o CSS + HTML prontos.
Entrada
Aparece tanto como o texto do elemento quanto em seu atributo data-text, que é lido pelas camadas de efeito.
O efeito de faixas cortadas pinta suas camadas com uma cor sólida, então deve corresponder ao fundo real.
O quanto as camadas de glitch são deslocadas, em pixels. Dimensione com o tamanho da fonte.
Comprimento de um ciclo de animação completo (0,2-5s). Um loop mais curto parece mais frenético.
Saída
Seu texto glitch aparecerá aqui.
O efeito gerado real, isolado em um Shadow DOM para que @keyframes seja realmente animado.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-glitch-text-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"text": "GLITCH",
"effect": "chromatic",
"fontSize": "80",
"fontFamily": "mono",
"textColor": "#ffffff",
"bgColor": "#222222",
"glitchColor1": "#00ffff",
"glitchColor2": "#ff00ff",
"intensity": "4",
"duration": "1.5"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-glitch-text-generator` tool (CSS Glitch Text Effect Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-glitch-text-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Efeito Glitch de Texto CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que faz
O Gerador de Efeito Glitch de Texto CSS cria texto "glitch" animado — a divisão RGB, faixas rasgadas, aparência de erro VHS — como um snippet CSS + HTML independente. Digite seu texto, escolha um dos quatro efeitos, defina as cores, o tamanho, a intensidade e a velocidade do loop, e copie os dois blocos para seu projeto.
Não há imagem, nenhum arquivo de fonte, nenhum JavaScript e nenhuma biblioteca de animação envolvida: o efeito inteiro é text-shadow, clip-path, transform e um loop CSS @keyframes.
Os quatro efeitos
- Divisão Cromática — as duas cores de glitch deslizam em ambos os lados dos glifos a cada quadro, produzindo o clássico look impresso não registrado / anaglífico. Sutil em intensidade baixa, agressivo em intensidade alta.
- Faixas Cortadas — o glitch real: duas cópias extras do texto (desenhadas por
::beforee::afterdo atributodata-text) são cortadas em faixas horizontais comclip-path: inset()e deslocadas para fora do registro, então fatias da palavra parecem se soltar e voltar. - Tremida & Inclinação — o bloco inteiro oscila e inclina em passos duros, com a divisão de cores piscando. Bom para um 404 ou um estado de erro.
- Cintilação — uma piscada de sinal de néon falhando: o texto atenua e volta a acender em um cronograma irregular com um sangue de cor nas bordas.
Como a intensidade funciona
Intensidade é o deslocamento, em pixels, que cada camada do efeito se move. Ele dimensiona os deslocamentos de text-shadow, os deslocamentos de left das camadas de faixa cortada e a distância de translate da tremida. Como regra prática, mantenha a intensidade em torno de 5% do tamanho da fonte — cerca de 4px no tipo 80px — depois aumente para um destaque e diminua para qualquer coisa que você realmente espera que as pessoas leiam.
Acessibilidade do movimento
O movimento rápido e de alto contraste é um gatilho conhecido para enxaquecas e sintomas vestibulares, e um loop de glitch é tão rápido e tão contrastante quanto texto web. Portanto, cada snippet que essa ferramenta gera termina com um bloco @media (prefers-reduced-motion: reduce) que define animation: none, para que o texto volte a um estado estático limpo para qualquer pessoa cujo sistema peça movimento reduzido. Mantenha esse bloco quando colar o CSS.
Como usar
- Digite seu Texto. Ele é escrito tanto como o texto do elemento quanto em seu atributo
data-text, que as camadas de Faixas Cortadas leem. - Escolha um Efeito Glitch, depois defina Tamanho da Fonte e Fonte.
- Escolha as cores: Texto, Fundo e as duas Cores Glitch (ciano/magenta é o emparelhamento tradicional).
- Ajuste Intensidade e Duração do Loop — um loop mais curto é lido como mais frenético.
- Copie o CSS para sua folha de estilo e o HTML para sua marcação.
FAQ
Por que o snippet define uma cor de fundo? O efeito de Faixas Cortadas pinta suas duas camadas duplicadas com um fundo sólido para que as fatias mascarem o texto original abaixo. Se essa cor não corresponder ao que está realmente por trás do elemento, as costuras aparecem. Defina Cor de Fundo para o fundo real da página — ou mantenha o próprio fundo do elemento, que o CSS gerado aplica para você.
Posso usá-lo em um elemento existente em vez do <div> gerado?
Sim. Adicione class="io-glitch" e um atributo data-text contendo o mesmo texto. O valor de data-text é o que as camadas de efeito duplicam, portanto deve corresponder ao texto visível ou o rasgamento mostrará os caracteres errados.
Funciona em texto de múltiplas linhas? O efeito é projetado para uma única linha — um título, um logotipo, um 404. As camadas cortadas são posicionadas contra a caixa de elemento, então parágrafos longos e quebrados parecerão desalinhados.
Algo é carregado? Não. O snippet é gerado no seu navegador a partir dos valores que você insere; nada é enviado para um servidor ou armazenado.
Ferramentas relacionadas
Para outro efeito de tipo CSS puro, tente o Gerador CSS de Texto Gradiente. Se você quiser caracteres com glitch em vez de estilo com glitch — texto que permanece quebrado quando colado em um chat ou biografia — o Gerador de Texto Zalgo faz isso com marcas de combinação Unicode em vez de CSS. Para escrever sua própria curva de animação sob medida, use o Gerador de Animação Keyframe CSS e reduza a folha de estilo finalizada com o CSS Minifier & Beautifier.