CSS Text Glitch Generator

Deze tool bouwt een geanimeerd RGB-split glitch-teksteffect uit pure CSS, met twee gedupliceerde pseudo-elementen die trillen en van kleur verspringen achter je tekst. Typ je tekst, kies twee accentkleuren, pas de glitch-intensiteit en -snelheid aan, bekijk de live animatie, en kopieer daarna zowel de gegenereerde CSS als de kleine HTML-structuur die nodig is.

Wat is deze tool?

Een CSS-glitcheffect bootst de look na van een verstoord uitzendsignaal of een versleten VHS-band door een stuk tekst tweemaal te dupliceren via ::before- en ::after-pseudo-elementen, elke kopie licht te verschuiven met een gekleurde text-shadow (klassiek rood en cyaan, als echo van analoge RGB-signaalfouten), en het clip-path van elke kopie te animeren met @keyframes zodat verschillende horizontale stroken van elke gekleurde kopie in en uit flitsen.

De techniek heeft geen afbeeldingen, geen JavaScript-animatielus en geen canvas nodig — het is pure CSS, toegepast op één enkel HTML-element dat zijn eigen tekst tweemaal draagt: eenmaal als echte tekstinhoud, en eenmaal via een data-text-attribuut dat de pseudo-elementen uitlezen met content: attr(data-text).

Bron: CSS Pseudo-Elements Module Level 4, W3C — definieert de ::before/::after-pseudo-elementen en de attr()-functie waarop dit effect is gebouwd.

Waarom gebruiken?

Live geanimeerde preview — zie het echte glitcheffect terwijl je typt en instellingen aanpast, geen statische mockup.
Twee onafhankelijk instelbare accentkleuren, standaard de klassieke rood/cyaan RGB-split-look maar aanpasbaar aan elk merk of thema.
Intensiteitsregelaar bepaalt de kleurschaduw-offset in pixels; snelheidsregelaar bepaalt hoe snel de clip-path-keyframes doorlopen.
Kopieert zowel de CSS (inclusief de volledige @keyframes-blokken) als de exacte benodigde HTML-structuur, omdat het effect afhangt van een data-text-attribuut dat overeenkomt met de zichtbare tekst.
Pure CSS — geen JavaScript nodig tijdens runtime zodra het op je pagina staat, en geen externe bibliotheken of afbeeldingen om te laden.
Gratis, geen aanmelding, draait volledig in je browser.

Hoe te gebruiken

Typ de tekst die je wilt laten glitchen in het tekstveld — de live preview wordt direct bijgewerkt.
Kies twee accentkleuren; de klassieke standaard is rood en cyaan voor een retro RGB-split-look, maar elke twee contrasterende kleuren werken.
Pas de intensiteitsregelaar aan om te bepalen hoe ver de twee kleurlagen uit elkaar liggen — hogere waarden lezen als een agressievere glitch.
Pas de snelheidsregelaar aan om te bepalen hoe snel de glitch flikkert.
Kopieer het CSS-blok en plak het in je stylesheet.
Kopieer het HTML-fragment en gebruik het exact zoals getoond — het data-text-attribuut moet overeenkomen met de zichtbare tekst van het element, anders werkt het effect niet.

Voorbeeld

Invoer

Tekst: "GLITCH" · Kleur 1: #ff0040 (rood) · Kleur 2: #00fff9 (cyaan) · Intensiteit: 5px

Uitvoer

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

De basistekst blijft wit terwijl de twee pseudo-elementkopieën in rood en cyaan aan weerszijden flikkeren, wat de klassieke verstoord-signaal-look oplevert.

Waarom het element een data-text-attribuut nodig heeft

De ::before- en ::after-pseudo-elementen kunnen de gewone tekstinhoud van een element niet direct uitlezen — CSS content: attr() werkt alleen met echte HTML-attributen, niet met onderliggende tekstknopen. Daarom herhaalt de gegenereerde HTML de tekst als een data-text="..."-attribuut op hetzelfde element: de zichtbare tekst rendert normaal, terwijl elk pseudo-element onafhankelijk dezelfde string ophaalt via content: attr(data-text) en zijn eigen kleurverschoven, geanimeerde kopie erbovenop legt.

Hoe het geflikker tot stand komt

Elk pseudo-element wordt geanimeerd met zijn eigen @keyframes-blok dat door een reeks clip-path: inset(...)-waarden stapt. Bij elk keyframe wordt een andere horizontale strook van de gekleurde kopie zichtbaar terwijl de rest wordt afgeknipt, waardoor het zichtbare fragment rood (of cyaan) verticaal heen en weer springt terwijl de animatie speelt — gecombineerd met de gekleurde text-shadow-offset leest dit als gescheurde, verkeerd uitgelijnde kleurkanalen in plaats van een gladde gloed.

Waar dit effect goed past

Hero-koppen op gaming-, cyberpunk-, streaming- of muziekmerk-landingspagina's.
404-/foutpagina's, waar een glitch het 'er ging iets mis'-thema versterkt.
Hover- of focusstatussen op een kop of logo voor een korte, aandachttrekkende accent.
Laad- of 'bezig'-statussen waar een glitch systeemactiviteit overbrengt.
Gebruik het spaarzaam op lopende tekst — het effect is bewust moeilijk in één oogopslag te lezen, dus werkt het het beste op korte koppen of een logotype, niet op alinea's.

Combineren met andere CSS-tools

Een glitch-kop is vaak slechts één element in een groter, donker, contrastrijk ontwerp. Combineer het met een zachte gloeischaduw of afgeronde kaartranden uit de andere CSS-tools hieronder voor een afgewerktere look.

→ Box Shadow Generator · Border Radius Generator

Veelgestelde vragen

Waarom zijn rood en cyaan de standaardkleuren?

Rood en cyaan bootsen de klassieke RGB-kanaalverschuiving na die te zien is bij verstoorde analoge video en vroege digitale signaalfouten, waar de visuele taal van het 'glitch'-effect oorspronkelijk vandaan komt. Je kunt elke twee kleuren inwisselen, maar sterk contrasterende tinten lezen het duidelijkst als een kleursplitsing.

Vereist dit effect JavaScript?

Nee — zodra de CSS op je pagina staat, is de glitch een pure CSS-animatie aangedreven door @keyframes. JavaScript wordt alleen gebruikt door deze tool zelf, in je browser, om de live preview bij te werken en de kopieerbare code te genereren.

Waarom verschijnt het effect niet als ik de CSS in mijn project plak?

De meest voorkomende oorzaak is een niet-overeenkomend of ontbrekend data-text-attribuut. De pseudo-elementen renderen wat er in data-text="..." op het element staat, niet de eigen tekstinhoud van het element, dus beide moeten ingesteld zijn en exact overeenkomen, inclusief hoofdlettergebruik.

Kan ik dit toepassen op een kop zoals h1 in plaats van een div?

Ja — de techniek werkt op elk inline- of blokelement dat ::before/::after-pseudo-elementen en een data-text-attribuut accepteert. Pas gewoon dezelfde class en hetzelfde data-text-attribuut toe op je h1, span of ander element in plaats van een div.

Schaadt een sterk glitch-effect de toegankelijkheid of SEO?

De onderliggende tekstinhoud is echte, selecteerbare tekst, dus schermlezers en zoekmachines lezen deze normaal, ongeacht de visuele animatie. Overweeg voor gebruikers gevoelig voor flikkerende beweging om prefers-reduced-motion te respecteren door de animatie voor hen uit te schakelen of te vertragen.