CSS Text Glitch-generator

Det här verktyget bygger en animerad RGB-splittrad glitcheffekt för text med ren CSS, med hjälp av två duplicerade pseudo-element som skakar och förskjuter färg bakom din text. Skriv din text, välj två accentfärger, justera glitch-intensitet och hastighet, se den animeras live, och kopiera sedan både den genererade CSS:en och den lilla HTML-struktur den behöver.

Vad är detta verktyg?

En CSS-glitcheffekt fejkar utseendet av en korrupt sändningssignal eller ett trasigt VHS-band genom att duplicera ett textstycke två gånger med ::before- och ::after-pseudo-element, förskjuta varje kopia något med en färgad text-shadow (klassiskt rött och cyan, som ekar analoga RGB-signalfel), och animera varje kopias clip-path med @keyframes så att olika horisontella skivor av varje färgad kopia blinkar in och ut över tid.

Tekniken behöver inga bilder, ingen JavaScript-animationsloop och ingen canvas — det är ren CSS lagrad på ett enda HTML-element som bär sin egen text två gånger: en gång som riktigt textinnehåll, och en gång via ett data-text-attribut som pseudo-elementen läser med content: attr(data-text).

Källa: CSS Pseudo-Elements Module Level 4, W3C — definierar ::before/::after-pseudo-elementen och attr()-funktionen som denna effekt är byggd av.

Varför använda det?

Levande animerad förhandsvisning — se den faktiska glitcheffekten medan du skriver och justerar inställningar, inte bara en statisk mockup.
Två oberoende justerbara accentfärger, som standard det klassiska röd/cyan-RGB-splittrade utseendet men anpassningsbara till valfritt varumärke eller tema.
Intensitetsreglaget styr färgskuggans förskjutning i pixlar; hastighetsreglaget styr hur snabbt clip-path-keyframes cyklas.
Kopierar både CSS:en (inklusive hela @keyframes-blocken) och den exakta HTML-strukturen som behövs, eftersom effekten beror på ett data-text-attribut som matchar den synliga texten.
Ren CSS — ingen JavaScript krävs vid körning när den väl är på din sida, och inga externa bibliotek eller bilder att ladda.
Gratis, ingen registrering, körs helt i din webbläsare.

Så använder du det

Skriv texten du vill ha glitchad i textfältet — den uppdaterar den levande förhandsvisningen omedelbart.
Välj två accentfärger; den klassiska standarden är rött och cyan för ett retro RGB-splittrat utseende, men vilka två kontrasterande färger som helst fungerar.
Justera intensitetsreglaget för att styra hur långt isär de två färglagren sitter — högre värden upplevs som en mer aggressiv glitch.
Justera hastighetsreglaget för att styra hur snabbt glitchen flimrar.
Kopiera CSS-blocket och klistra in det i din stilmall.
Kopiera HTML-utdraget och använd det exakt som visat — data-text-attributet måste matcha elementets synliga text för att effekten ska fungera.

Exempel

Inmatning

Text: "GLITCH" · Färg 1: #ff0040 (röd) · Färg 2: #00fff9 (cyan) · Intensitet: 5px

Resultat

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

Grundtexten förblir vit medan dess två pseudo-elementkopior flimrar i rött och cyan på var sin sida, vilket ger det klassiska korrupta signal-utseendet.

Varför elementet behöver ett data-text-attribut

::before- och ::after-pseudo-elementen kan inte läsa ett elements vanliga textinnehåll direkt — CSS content: attr() fungerar bara med faktiska HTML-attribut, inte barn-textnoder. Det är därför den genererade HTML:en upprepar texten som ett data-text="..."-attribut på samma element: den synliga texten renderas normalt, medan varje pseudo-element oberoende hämtar samma sträng via content: attr(data-text) och lägger sin egen färgförskjutna, animerade kopia ovanpå.

Hur flimret skapas

Varje pseudo-element animeras med sitt eget @keyframes-block som stegar genom en serie clip-path: inset(...)-värden. Vid varje keyframe avslöjas ett annat horisontellt band av den färgade kopian medan resten klipps bort, så den synliga skärvan av rött (eller cyan) hoppar runt vertikalt medan animationen spelas — kombinerat med den färgade text-shadow-förskjutningen upplevs detta som trasiga, felinriktade färgkanaler snarare än en jämn glöd.

Var denna effekt passar

Hjälterubriker på gaming-, cyberpunk-, streaming- eller musikvarumärkens landningssidor.
404/felsidor, där en glitch förstärker temat "något gick sönder".
Hover- eller fokustillstånd på en rubrik eller logotyp för en kort uppmärksamhetsdragande accent.
Laddnings- eller "bearbetar"-tillstånd där en glitch förmedlar systemaktivitet.
Använd sparsamt på brödtext — effekten är avsiktligt svår att läsa i förbifarten, så den fungerar bäst på korta rubriker eller logotyper, inte stycken.

Kombinera med andra CSS-verktyg

En glitch-rubrik är ofta bara ett element i en större mörk, högkontrastlayout. Kombinera den med en mjuk glödande skugga eller rundade kortkanter från de andra CSS-verktygen nedan för ett mer genomarbetat utseende.

→ Box Shadow-generator · Border Radius-generator

Vanliga frågor

Varför är rött och cyan standardfärgerna?

Rött och cyan efterliknar den klassiska RGB-kanalförskjutningen som ses i korrupt analog video och tidiga digitala signalfel, vilket är där glitch-effektens visuella språk ursprungligen kommer ifrån. Du kan byta ut mot vilka två färger som helst, men starkt kontrasterande nyanser läses tydligast som en färgsplittring.

Kräver den här effekten JavaScript?

Nej — när CSS:en väl är på din sida är glitchen en ren CSS-animation driven av @keyframes. JavaScript används bara av det här verktyget självt, i din webbläsare, för att uppdatera den levande förhandsvisningen och generera den kopierbara koden.

Varför visas inte effekten när jag klistrar in CSS:en i mitt projekt?

Den vanligaste orsaken är ett omatchat eller saknat data-text-attribut. Pseudo-elementen renderar vilken sträng som helst i data-text="..." på elementet, inte elementets eget textinnehåll, så båda måste vara satta och matcha exakt, inklusive versaler/gemener.

Kan jag applicera detta på en rubrik som h1 istället för en div?

Ja — tekniken fungerar på vilket inline- eller block-element som helst som accepterar ::before/::after-pseudo-element och ett data-text-attribut. Applicera bara samma klass och data-text-attribut på din h1, span eller annat element istället för en div.

Kommer en stark glitcheffekt att skada tillgängligheten eller SEO?

Det underliggande textinnehållet är riktig, markerbar text, så skärmläsare och sökmotorer läser den normalt oavsett den visuella animationen. För användare som är känsliga för blinkande rörelse, överväg att respektera prefers-reduced-motion genom att inaktivera eller sakta ner animationen för dessa användare.