Pular para o conteúdo
Toolars
Explorar

Gerador de efeito glitch de texto CSS

CSS Text Glitch Effect Generator

Ajuste texto, tamanho, cores deslocadas, tremor e duração; o CSS respeita movimento reduzido.

Processamento local

Detalhes do processamento

Os dados da ferramenta são processados no seu dispositivo.

Esta ferramenta pode baixar recursos. Os serviços de conta são separados.

Informações de privacidade
Reportar erro

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

    Texto de prévia · Tamanho da fonte · Efeito · Deslocamento RGB / Tremor

  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. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.

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. Ajuste texto, tamanho, cores deslocadas, tremor e duração; o CSS respeita movimento reduzido. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.
Quais são os limites do texto?
Texto de prévia: 1–120. Confira fonte, controles e validação antes de exportar. Um resultado inválido não pode ser exportado.
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.

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

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

Gerador de caixas de seleção CSS

CSS Checkbox Generator

24 modelos de caixa: oito marcas × três transições; teste a prévia nativa com clique ou Espaço.

Criar

Gerador de interruptores CSS

CSS Switch Generator

18 modelos de interruptor: seis formas × três transições; teste com clique ou teclado.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

24 formas de recorte, parâmetros e pontos de polígono editáveis; exporte CSS ou uma declaração.

Criar