Pular para o conteúdo
Toolars
Explorar
Reportar erro

Design · utilitário Local

Gerador de efeito glitch de texto CSS

CSS Text Glitch Effect Generator

Crie um glitch cromático de três camadas em textos curtos, com deslocamento e velocidade ajustáveis, e copie CSS com fallback reduced-motion.

Caminho da tarefa / da entrada ao resultado

Digite o texto de pré-visualização

Roda localmente · Nada é enviado

Como Gerador de efeito glitch de texto CSS funciona, privacidade e ferramentas relacionadas

Caminho da tarefa / da entrada ao resultado

Como criar um efeito de texto glitch em CSS

  1. 01

    Digite o texto de pré-visualização

    Insira de 1 a 32 caracteres em Texto de pré-visualização — o contador ao lado do rótulo acompanha o comprimento. Palavras curtas e largas funcionam melhor quando as camadas começam a se dividir.

  2. 02

    Defina as três cores

    A Cor do texto pinta a camada base, enquanto Canal ciano e Canal vermelho são as réplicas deslocadas que produzem a franja cromática. Canais próximos do ciano e vermelho puros dão o visual cromático clássico; canais suavizados produzem uma divisão mais sutil e moderna.

  3. 03

    Ajuste o movimento do glitch

    O Deslocamento de camada (1–12 px) define o quanto as réplicas derivam, e a Duração do ciclo (0,2–3 s) define a velocidade do loop. A pré-visualização encena as três camadas ao vivo.

  4. 04

    Entenda as três camadas

    O elemento base mantém a sua Cor do texto, enquanto a réplica ciano é recortada na metade superior da linha e a vermelha, na inferior. Cada réplica roda uma animação steps(2, end) — saltos secos em vez de deslizes suaves — que é o que faz o glitch parecer interferência de sinal.

  5. 05

    Copie o CSS do glitch

    Pressione Copiar CSS ou Baixar .css para salvar toolars-text-glitch.css. Um bloco prefers-reduced-motion vai na exportação e mantém uma franja estática para visitantes sensíveis a movimento. O painel de saída mostra a contagem de bytes ao vivo, e as duas ações ficam desativadas enquanto o texto não passar na validação.

  6. 06

    Adicione o atributo data-text

    As réplicas leem seu conteúdo de attr(data-text), então seu elemento precisa de um atributo data-text idêntico ao texto visível. Quando o texto mudar depois, atualize os dois — o atributo é o que as camadas ciano e vermelha realmente pintam. O atributo vive no mesmo elemento da classe, então todo o efeito fica em uma única tag.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Gerador de efeito glitch de texto CSS usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

O que Gerador de efeito glitch de texto CSS realmente faz

Uma sobreposição de transmissão quer um título que crepita, uma página 404 precisa da dose certa de ameaça, uma tela de abertura de conferência busca energia de terminal retrô. Tipografia glitch é fácil de exagerar, e é por isso que o deslocamento e a duração têm limites — e como o efeito é composto nesta aba, uma marca ainda não lançada nunca sai da máquina enquanto está sendo testada. Palavras curtas em tamanhos grandes carregam melhor o efeito, então teste o título real em vez de texto de preenchimento. Os keyframes exportados mantêm o deslocamento e a cadência exatos que você definiu.

Perguntas frequentes

Que HTML o efeito precisa?
Um elemento com a classe .glitch e um atributo data-text idêntico ao seu conteúdo de texto. As réplicas ::before e ::after são pintadas a partir desse atributo e depois recortadas nas metades superior e inferior da linha.
Quais são os limites do texto?
O Texto de pré-visualização aceita de 1 a 32 caracteres, com um contador ao vivo ao lado do campo. Texto vazio ou qualquer coisa além do limite falha na validação e mostra o status VERIFIQUE OS VALORES até ser corrigido.
Como ele se comporta para usuários de reduced-motion?
A exportação inclui um bloco prefers-reduced-motion que interrompe as duas animações e reduz as réplicas a 45% de opacidade, deixando uma franja cromática estática em vez de uma em movimento. O texto base fica intacto nos dois casos, então a mensagem continua legível nos dois modos.
Por que a animação salta em vez de deslizar?
As duas animações de réplica usam steps(2, end), que faz a transformação saltar entre posições discretas em vez de interpolar suavemente. Esse passo seco é a assinatura da estética de interferência de sinal; o Deslocamento de camada define a distância de cada salto.
Que valores de deslocamento e duração funcionam bem?
Deslocamentos de 1–3 px com um ciclo próximo de um segundo parecem estática sutil e combinam com títulos que precisam continuar legíveis. Suba para 8–12 px com um ciclo mais rápido apenas para palavras decorativas curtas; os padrões de 4 px e 0,85 s ficam num meio-termo seguro.
O texto que eu digito é enviado para algum lugar?
Não. O efeito renderiza localmente na aba atual do navegador, nenhuma conta é necessária e o texto nunca entra em armazenamento, registros ou rede. Pressione Redefinir para restaurar o exemplo padrão.

Continuar em Design

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de animações de carregamento CSS

CSS Loader Generator

Desenhe um carregador de anel orbital ou três pontos com tamanho, traço, velocidade e cores ajustáveis e copie CSS com reduced-motion.

Criar

Gerador de caixas de seleção CSS

CSS Checkbox Generator

Estilize uma caixa de seleção própria com tamanho, borda e cores por estado e copie CSS que mantém um input real acessível por teclado.

Criar

Gerador de interruptores CSS

CSS Switch Generator

Crie um interruptor só de CSS com trilha, botão e cores dos dois estados, e copie o código com foco e reduced-motion tratados.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

Edite vértices arrastando, pelo teclado ou por coordenadas. Quatro formas iniciais e cópia local da declaração clip-path ou do CSS completo.

Criar