Gerador de Texto Glitch CSS

O que é esta ferramenta?

Um efeito glitch em CSS simula a aparência de um sinal de transmissão corrompido ou de uma fita VHS danificada, duplicando um texto duas vezes com pseudo-elementos ::before e ::after, deslocando cada cópia levemente com uma sombra de texto colorida (classicamente vermelho e ciano, ecoando erros de sinal RGB analógico), e animando o clip-path de cada cópia com @keyframes para que diferentes faixas horizontais de cada cópia colorida piscam ao longo do tempo.

A técnica não precisa de imagens, nem de um loop de animação em JavaScript, nem de canvas — é CSS puro sobreposto em um único elemento HTML que carrega o próprio texto duas vezes: uma como conteúdo de texto real, e outra via um atributo data-text que os pseudo-elementos leem com content: attr(data-text).

Fonte: CSS Pseudo-Elements Module Level 4, W3C — define os pseudo-elementos ::before/::after e a função attr() sobre os quais este efeito é construído.

Por que usar?

• Pré-visualização animada ao vivo — veja o efeito glitch real enquanto digita e ajusta as configurações, não apenas um mockup estático.
• Duas cores de destaque ajustáveis de forma independente, com o clássico vermelho/ciano como padrão, mas personalizáveis para qualquer marca ou tema.
• O controle de intensidade ajusta o deslocamento em pixels da sombra colorida; o de velocidade controla a rapidez do ciclo de keyframes do clip-path.
• Copia tanto o CSS (incluindo os blocos @keyframes completos) quanto a estrutura HTML exata necessária, já que o efeito depende de um atributo data-text que corresponda ao texto visível.
• CSS puro — sem JavaScript em tempo de execução depois de estar na sua página, e sem bibliotecas externas ou imagens para carregar.
• Grátis, sem cadastro, roda inteiramente no seu navegador.

Como usar

1. Digite o texto que você quer distorcer no campo de texto — a pré-visualização atualiza imediatamente.
2. Escolha duas cores de destaque; o padrão clássico é vermelho e ciano para um visual retrô de separação RGB, mas qualquer par de cores contrastantes funciona.
3. Ajuste o controle de intensidade para definir quão separadas as duas camadas de cor ficam — valores mais altos parecem um glitch mais agressivo.
4. Ajuste o controle de velocidade para definir quão rápido o glitch pisca.
5. Copie o bloco de CSS e cole na sua folha de estilos.
6. Copie o trecho de HTML e use-o exatamente como está — o atributo data-text precisa corresponder ao texto visível do elemento para que o efeito funcione.

Exemplo

Entrada

Texto: "GLITCH" · Cor 1: #ff0040 (vermelho) · Cor 2: #00fff9 (ciano) · Intensidade: 5px

Resultado

<div class="glitch" data-text="GLITCH">GLITCH</div>
.glitch::before { text-shadow: 5px 0 #ff0040; ... }
.glitch::after { text-shadow: -5px 0 #00fff9; ... }

O texto base permanece branco enquanto suas duas cópias em pseudo-elementos piscam em vermelho e ciano de cada lado, produzindo o visual clássico de sinal corrompido.

Por que o elemento precisa de um atributo data-text

Os pseudo-elementos ::before e ::after não conseguem ler diretamente o conteúdo de texto normal de um elemento — content: attr() em CSS só funciona com atributos HTML reais, não com nós de texto filhos. É por isso que o HTML gerado repete o texto como um atributo data-text="..." no mesmo elemento: o texto visível renderiza normalmente, enquanto cada pseudo-elemento obtém de forma independente a mesma string via content: attr(data-text) e sobrepõe sua própria cópia animada e com cor deslocada.

Como o piscar é produzido

Cada pseudo-elemento é animado com seu próprio bloco @keyframes que percorre uma série de valores clip-path: inset(...). Em cada keyframe, uma faixa horizontal diferente da cópia colorida é revelada enquanto o resto é recortado, então o fragmento visível de vermelho (ou ciano) salta verticalmente enquanto a animação toca — combinado com o deslocamento da sombra colorida, isso lê como canais de cor rasgados e desalinhados em vez de um brilho suave.

Onde esse efeito se encaixa

• Títulos principais em landing pages de games, cyberpunk, streaming ou marcas musicais.
• Páginas de erro / 404, onde um glitch reforça o tema 'algo quebrou'.
• Estados de hover ou foco em um título ou logo para um destaque breve e chamativo.
• Estados de carregamento ou 'processando', onde um glitch transmite atividade do sistema.
• Use com moderação em texto corrido — o efeito é propositalmente difícil de ler rapidamente, então funciona melhor em títulos curtos ou logotipos, não em parágrafos.

Combinando com outras ferramentas CSS

Um título glitch costuma ser apenas um elemento dentro de um layout escuro e de alto contraste mais amplo. Combine com uma sombra suave ou cantos arredondados das outras ferramentas CSS abaixo para um visual mais completo.

→ Gerador de Box Shadow · Gerador de Border Radius

Perguntas frequentes