Generator CSS Text Glitch

Ce este acest instrument?

Un efect CSS glitch simulează aspectul unui semnal de difuzare corupt sau al unei casete VHS rupte, duplicând o bucată de text de două ori folosind pseudo-elemente ::before și ::after, decalând ușor fiecare copie cu o umbră de text colorată (clasic roșu și cyan, ecouri ale erorilor de semnal RGB analogic), și animând clip-path-ul fiecărei copii cu @keyframes, astfel încât diferite felii orizontale ale fiecărei copii colorate pâlpâie în și din vedere de-a lungul timpului.

Tehnica nu are nevoie de imagini, buclă de animație JavaScript sau canvas — este CSS pur stratificat pe un singur element HTML care își poartă propriul text de două ori: o dată ca text real, și o dată printr-un atribut data-text pe care pseudo-elementele îl citesc cu content: attr(data-text).

Sursă: CSS Pseudo-Elements Module Level 4, W3C — definește pseudo-elementele ::before/::after și funcția attr() din care este construit acest efect.

De ce să-l folosești?

• Previzualizare animată live — vezi efectul de glitch real pe măsură ce scrii și ajustezi setările, nu doar un mockup static.
• Două culori de accent ajustabile independent, implicit clasicul aspect roșu/cyan cu separare RGB, dar personalizabile pentru orice brand sau temă.
• Sliderul de intensitate controlează decalajul umbrei colorate în pixeli; sliderul de viteză controlează cât de rapid ciclează keyframes-urile clip-path.
• Copiază atât CSS-ul (inclusiv blocurile complete @keyframes), cât și structura HTML exactă necesară, deoarece efectul depinde de un atribut data-text care se potrivește cu textul vizibil.
• CSS pur — fără JavaScript necesar la rulare odată ce este pe pagina ta, și fără biblioteci externe sau imagini de încărcat.
• Gratuit, fără înregistrare, rulează complet în browserul tău.

Cum se folosește

1. Scrie textul pe care vrei să-l faci glitch în câmpul de text — actualizează imediat previzualizarea live.
2. Alege două culori de accent; implicit clasic este roșu și cyan pentru un aspect retro de separare RGB, dar orice două culori contrastante funcționează.
3. Ajustează sliderul de intensitate pentru a controla cât de departe stau cele două straturi de culoare — valori mai mari se citesc ca un glitch mai agresiv.
4. Ajustează sliderul de viteză pentru a controla cât de rapid pâlpâie glitch-ul.
5. Copiază blocul CSS și lipește-l în foaia ta de stiluri.
6. Copiază fragmentul HTML și folosește-l exact așa cum este arătat — atributul data-text trebuie să se potrivească cu textul vizibil al elementului pentru ca efectul să funcționeze.

Exemplu

Intrare

Text: "GLITCH" · Culoarea 1: #ff0040 (roșu) · Culoarea 2: #00fff9 (cyan) · Intensitate: 5px

Rezultat

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

Textul de bază rămâne alb, în timp ce cele două copii pseudo-element pâlpâie în roșu și cyan pe fiecare parte, producând aspectul clasic de semnal corupt.

De ce elementul are nevoie de un atribut data-text

Pseudo-elementele ::before și ::after nu pot citi direct conținutul text obișnuit al unui element — content: attr() din CSS funcționează doar cu atribute HTML reale, nu cu noduri text copil. De aceea HTML-ul generat repetă textul ca un atribut data-text="..." pe același element: textul vizibil se randează normal, în timp ce fiecare pseudo-element preia independent același șir prin content: attr(data-text) și stratifică deasupra propria copie animată, cu culoare decalată.

Cum este produs pâlpâitul

Fiecare pseudo-element este animat cu propriul bloc @keyframes care parcurge o serie de valori clip-path: inset(...). La fiecare keyframe, o bandă orizontală diferită a copiei colorate este dezvăluită, în timp ce restul este decupat, deci fâșia vizibilă de roșu (sau cyan) sare vertical pe măsură ce animația rulează — combinat cu decalajul umbrei colorate, asta se citește ca niște canale de culoare rupte, dezaliniate, nu ca o strălucire fluidă.

Unde se potrivește acest efect

• Titluri hero pe pagini de destinație pentru gaming, cyberpunk, streaming sau branduri muzicale.
• Pagini 404 / de eroare, unde un glitch întărește tema 'ceva s-a stricat'.
• Stări de hover sau focus pe un titlu sau logo pentru un accent scurt, care atrage atenția.
• Stări de încărcare sau 'procesare', unde un glitch transmite activitate a sistemului.
• Folosește-l cu moderație pe textul din corp — efectul este intenționat greu de citit dintr-o privire, deci funcționează cel mai bine pe titluri scurte sau logotip, nu pe paragrafe.

Combinarea cu alte instrumente CSS

Un titlu glitch este adesea doar un element dintr-un layout mai mare, întunecat, cu contrast ridicat. Combină-l cu o umbră de strălucire moale sau margini de card rotunjite din celelalte instrumente CSS de mai jos, pentru un aspect mai finisat.

→ Generator Box Shadow · Generator Border Radius

Întrebări frecvente