CSS-glitchtekst-generator

Dette verktøyet bygger en animert RGB-splittet glitch-teksteffekt av ren CSS, ved å bruke to dupliserte pseudo-elementer som rister og forskyver farge bak teksten din. Skriv inn teksten din, velg to aksentfarger, juster glitch-intensiteten og hastigheten, se den animeres live, og kopier deretter både den genererte CSS-en og den lille HTML-strukturen den trenger.

Hva er dette verktøyet?

En CSS-glitcheffekt etterligner utseendet til et forstyrret kringkastingssignal eller et ødelagt VHS-bånd ved å duplisere et stykke tekst to ganger med ::before- og ::after-pseudo-elementer, forskyve hver kopi litt med en farget text-shadow (klassisk rødt og turkis, som gjenspeiler analoge RGB-signalfeil), og animere hver kopis clip-path med @keyframes slik at forskjellige horisontale skiver av hver fargede kopi blinker inn og ut over tid.

Teknikken trenger verken bilder, en JavaScript-animasjonsløkke eller canvas — det er ren CSS lagt oppå ett enkelt HTML-element som bærer sin egen tekst to ganger: én gang som ekte tekstinnhold, og én gang via et data-text-attributt som pseudo-elementene leser med content: attr(data-text).

Kilde: CSS Pseudo-Elements Module Level 4, W3C — definerer ::before/::after-pseudo-elementene og attr()-funksjonen denne effekten er bygget på.

Hvorfor bruke det?

Live animert forhåndsvisning — se selve glitch-effekten mens du skriver og justerer innstillingene, ikke bare en statisk skisse.
To uavhengig justerbare aksentfarger, som som standard er det klassiske rødt/turkis RGB-splittede utseendet, men kan tilpasses til et hvilket som helst merke eller tema.
Intensitets-glidebryteren styrer fargeskygge-forskyvningen i piksler; hastighets-glidebryteren styrer hvor raskt clip-path-keyframene sykler.
Kopierer både CSS-en (inkludert de fullstendige @keyframes-blokkene) og den nøyaktige HTML-strukturen som trengs, siden effekten er avhengig av et data-text-attributt som matcher den synlige teksten.
Ren CSS — ingen JavaScript kreves under kjøring når den først er på siden din, og ingen eksterne biblioteker eller bilder å laste inn.
Gratis, ingen registrering, kjører helt i nettleseren din.

Slik bruker du det

Skriv teksten du vil ha glitchet inn i tekstfeltet — det oppdaterer den levende forhåndsvisningen umiddelbart.
Velg to aksentfarger; det klassiske standardvalget er rødt og turkis for et retro RGB-splittet utseende, men to hvilke som helst kontrasterende farger fungerer.
Juster intensitets-glidebryteren for å styre hvor langt fra hverandre de to fargelagene ligger — høyere verdier oppleves som en mer aggressiv glitch.
Juster hastighets-glidebryteren for å styre hvor raskt glitchen flimrer.
Kopier CSS-blokken og lim den inn i stilarket ditt.
Kopier HTML-utdraget og bruk det nøyaktig som vist — data-text-attributtet må matche elementets synlige tekst for at effekten skal fungere.

Eksempel

Inndata

Tekst: «GLITCH» · Farge 1: #ff0040 (rød) · Farge 2: #00fff9 (turkis) · 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; ... }

Grunnteksten forblir hvit mens de to pseudo-element-kopiene flimrer i rødt og turkis på hver sin side, noe som gir det klassiske korrupte-signal-utseendet.

Hvorfor elementet trenger et data-text-attributt

::before- og ::after-pseudo-elementene kan ikke lese et elements vanlige tekstinnhold direkte — CSS content: attr() fungerer bare med faktiske HTML-attributter, ikke underordnede tekstnoder. Det er derfor den genererte HTML-en gjentar teksten som et data-text="..."-attributt på samme element: den synlige teksten rendres normalt, mens hvert pseudo-element uavhengig henter den samme strengen via content: attr(data-text) og legger sin egen fargeforskjøvne, animerte kopi oppå.

Hvordan flimringen skapes

Hvert pseudo-element animeres med sin egen @keyframes-blokk som går gjennom en serie clip-path: inset(...)-verdier. Ved hvert keyframe avsløres et annet horisontalt bånd av den fargede kopien mens resten klippes bort, slik at det synlige stripen av rødt (eller turkis) hopper rundt vertikalt mens animasjonen spilles av — kombinert med den fargede text-shadow-forskyvningen, oppleves dette som revne, feiljusterte fargekanaler snarere enn en jevn glød.

Hvor denne effekten passer

Hero-overskrifter på landingssider for gaming, cyberpunk, streaming eller musikkmerker.
404- / feilsider, der en glitch forsterker «noe gikk galt»-temaet.
Hover- eller fokustilstander på en overskrift eller logo for en kort, oppmerksomhetsvekkende aksent.
Laste- eller «behandler»-tilstander der en glitch formidler systemaktivitet.
Bruk sparsomt på brødtekst — effekten er bevisst vanskelig å lese ved et raskt blikk, så den fungerer best på korte overskrifter eller logotyper, ikke avsnitt.

Kombiner med andre CSS-verktøy

En glitch-overskrift er ofte bare ett element i et større mørkt, kontrastrikt oppsett. Kombiner den med en myk glødeskygge eller avrundede kortkanter fra de andre CSS-verktøyene nedenfor for et mer ferdig utseende.

→ Box Shadow-generator · Border Radius-generator

Ofte stilte spørsmål

Hvorfor er rødt og turkis standardfargene?

Rødt og turkis etterligner den klassiske feiljusteringen av RGB-kanaler man ser i korrupt analogt video og tidlige digitale signalfeil, som er der det visuelle språket i «glitch»-effekten opprinnelig kommer fra. Du kan bytte inn hvilke som helst to farger, men sterkt kontrasterende nyanser leses tydeligst som en fargesplitt.

Krever denne effekten JavaScript?

Nei — når CSS-en først er på siden din, er glitchen en ren CSS-animasjon drevet av @keyframes. JavaScript brukes bare av selve dette verktøyet, i nettleseren din, for å oppdatere den levende forhåndsvisningen og generere koden du kan kopiere.

Hvorfor vises ikke effekten når jeg limer CSS-en inn i prosjektet mitt?

Den vanligste årsaken er et feil eller manglende data-text-attributt. Pseudo-elementene rendrer hva enn streng som står i data-text="..." på elementet, ikke elementets eget tekstinnhold, så begge må settes og må matche nøyaktig, inkludert store og små bokstaver.

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

Ja — teknikken fungerer på ethvert inline- eller blokkelement som godtar ::before/::after-pseudo-elementer og et data-text-attributt. Bare bruk samme klasse og data-text-attributt på h1, span eller et annet element i stedet for en div.

Vil en sterk glitch-effekt skade tilgjengelighet eller SEO?

Det underliggende tekstinnholdet er ekte, markerbar tekst, så skjermlesere og søkemotorer leser det normalt uansett den visuelle animasjonen. For brukere som er følsomme for blinkende bevegelse, bør du vurdere å respektere prefers-reduced-motion ved å deaktivere eller senke animasjonen for dem.