CSS-glitchtekst-generator

Dette værktøj bygger en animeret RGB-split glitch-teksteffekt i ren CSS ved hjælp af to duplikerede pseudo-elementer, der ryster og farveforskyder sig bag din tekst. Skriv din tekst, vælg to accentfarver, justér glitch-intensiteten og hastigheden, se den animere live, og kopiér derefter både den genererede CSS og den lille HTML-struktur, den kræver.

Hvad er dette værktøj?

En CSS-glitcheffekt efterligner udseendet af et korrupt broadcast-signal eller et revet VHS-bånd ved at duplikere et stykke tekst to gange med ::before- og ::after-pseudo-elementer, forskyde hver kopi en smule med en farvet text-shadow (klassisk rød og cyan, som ekko af analoge RGB-signalfejl), og animere hver kopis clip-path med @keyframes, så forskellige vandrette skiver af hver farvede kopi blinker ind og ud over tid.

Teknikken kræver ingen billeder, ingen JavaScript-animationsloop og intet canvas — det er ren CSS lagt oven på et enkelt HTML-element, der bærer sin egen tekst to gange: én gang som rigtigt tekstindhold, og én gang via et data-text-attribut, som pseudo-elementerne læser med content: attr(data-text).

Kilde: CSS Pseudo-Elements Module Level 4, W3C — definerer ::before/::after-pseudo-elementerne og attr()-funktionen, som denne effekt er bygget ud fra.

Hvorfor bruge det?

Live animeret preview — se den faktiske glitch-effekt mens du skriver og justerer indstillinger, ikke bare en statisk mockup.
To uafhængigt justerbare accentfarver, som som standard bruger det klassiske rød/cyan RGB-split-look, men som kan tilpasses til ethvert brand eller tema.
Intensitets-skyder styrer farve-skygge-forskydningen i pixels; hastigheds-skyder styrer hvor hurtigt clip-path-keyframes cykler.
Kopierer både CSS'en (inklusive de fulde @keyframes-blokke) og den præcise HTML-struktur, der kræves, da effekten afhænger af et data-text-attribut, der matcher den synlige tekst.
Ren CSS — ingen JavaScript nødvendig ved runtime, når den først er på din side, og ingen eksterne biblioteker eller billeder at indlæse.
Gratis, ingen tilmelding, kører helt i din browser.

Sådan bruger du det

Skriv den tekst, du vil glitche, i tekstfeltet — den opdaterer straks den levende preview.
Vælg to accentfarver; standarden er klassisk rød og cyan for et retro RGB-split-look, men to vilkårlige kontrastfarver virker.
Justér intensitets-skyderen for at styre hvor langt fra hinanden de to farvelag sidder — højere værdier opleves som en mere aggressiv glitch.
Justér hastigheds-skyderen for at styre hvor hurtigt glitchen flimrer.
Kopiér CSS-blokken og indsæt den i dit stylesheet.
Kopiér HTML-uddraget og brug det præcis som vist — data-text-attributtet skal matche elementets synlige tekst, for at effekten virker.

Eksempel

Input

Tekst: "GLITCH" · Farve 1: #ff0040 (rød) · Farve 2: #00fff9 (cyan) · Intensitet: 5px

Output

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

Grundteksten forbliver hvid, mens dens to pseudo-element-kopier flimrer i rødt og cyan på hver sin side, hvilket giver det klassiske korrupte signal-look.

Hvorfor elementet skal have et data-text-attribut

::before- og ::after-pseudo-elementerne kan ikke læse et elements almindelige tekstindhold direkte — CSS content: attr() virker kun med rigtige HTML-attributter, ikke child-tekstknuder. Det er derfor den genererede HTML gentager teksten som et data-text="..."-attribut på det samme element: den synlige tekst renderes normalt, mens hvert pseudo-element uafhængigt henter den samme streng via content: attr(data-text) og lægger sin egen farveforskudte, animerede kopi ovenpå.

Hvordan flimmeret skabes

Hvert pseudo-element animeres med sin egen @keyframes-blok, der trin for trin gennemgår en række clip-path: inset(...)-værdier. Ved hvert keyframe afsløres et andet vandret bånd af den farvede kopi, mens resten klippes væk, så den synlige strimmel af rødt (eller cyan) hopper rundt lodret, mens animationen kører — kombineret med den farvede text-shadow-forskydning opleves dette som revne, forskudte farvekanaler frem for en jævn glød.

Hvor denne effekt passer ind

Hero-overskrifter på gaming-, cyberpunk-, streaming- eller musik-brand-landingsider.
404/fejlsider, hvor en glitch understøtter temaet 'noget gik i stykker'.
Hover- eller fokus-tilstande på en overskrift eller et logo for en kort opmærksomhedsvækkende accent.
Indlæsnings- eller 'behandler'-tilstande, hvor en glitch formidler systemaktivitet.
Brug sparsomt på brødtekst — effekten er bevidst svær at læse hurtigt, så den fungerer bedst på korte overskrifter eller logotyper, ikke afsnit.

Kombinér med andre CSS-værktøjer

En glitch-overskrift er ofte bare ét element i et større mørkt, kontrastrigt layout. Kombinér den med en blød glow-skygge eller afrundede kortkanter fra de andre CSS-værktøjer nedenfor for et mere færdigt look.

→ Box Shadow-generator · Border Radius-generator

Ofte stillede spørgsmål

Hvorfor er rød og cyan standardfarverne?

Rød og cyan efterligner den klassiske RGB-kanalforskydning set i korrupt analog video og tidlige digitale signalfejl, som er hvor det visuelle sprog for 'glitch'-effekten oprindeligt stammer fra. Du kan skifte til to vilkårlige farver, men stærkt kontrasterende nuancer læses tydeligst som et farvesplit.

Kræver denne effekt JavaScript?

Nej — når CSS'en først er på din side, er glitchen en ren CSS-animation drevet af @keyframes. JavaScript bruges kun af selve dette værktøj, i din browser, til at opdatere den levende preview og generere den kopierbare kode.

Hvorfor viser effekten sig ikke, når jeg indsætter CSS'en i mit projekt?

Den mest almindelige årsag er et manglende eller forkert matchende data-text-attribut. Pseudo-elementerne renderer den streng, der står i data-text="..." på elementet, ikke elementets eget tekstindhold, så begge skal være sat og skal matche præcist, inklusive store/små bogstaver.

Kan jeg anvende dette på en overskrift som h1 i stedet for en div?

Ja — teknikken virker på ethvert inline- eller blokelement, der accepterer ::before/::after-pseudo-elementer og et data-text-attribut. Anvend bare den samme klasse og det samme data-text-attribut på din h1, span eller andet element i stedet for en div.

Vil en kraftig glitch-effekt skade tilgængelighed eller SEO?

Det underliggende tekstindhold er rigtig, markerbar tekst, så skærmlæsere og søgemaskiner læser den normalt uanset den visuelle animation. For brugere, der er følsomme over for blinkende bevægelse, bør du overveje at respektere prefers-reduced-motion ved at deaktivere eller sænke animationen for disse brugere.