CSS Text-Glitch-Generator

Dieses Tool baut einen animierten RGB-Split-Glitch-Texteffekt aus reinem CSS, mit zwei duplizierten Pseudo-Elementen, die die Farbe hinter deinem Text zittern und verschieben lassen. Text eingeben, zwei Akzentfarben wählen, Glitch-Intensität und -Geschwindigkeit einstellen, die Animation live betrachten und dann sowohl das generierte CSS als auch die kleine benötigte HTML-Struktur kopieren.

Was ist dieses Tool?

Ein CSS-Glitch-Effekt täuscht das Aussehen eines gestörten Sendesignals oder eines zerkratzten VHS-Bands vor, indem ein Textstück mithilfe von ::before- und ::after-Pseudo-Elementen zweimal dupliziert wird, jede Kopie leicht mit einem farbigen text-shadow versetzt wird (klassisch Rot und Cyan, in Anlehnung an analoge RGB-Signalfehler), und der clip-path jeder Kopie mit @keyframes animiert wird, sodass unterschiedliche horizontale Streifen jeder farbigen Kopie über die Zeit aufblitzen.

Die Technik braucht keine Bilder, keine JavaScript-Animationsschleife und kein Canvas — es ist reines CSS auf einem einzigen HTML-Element, das seinen eigenen Text zweimal trägt: einmal als echten Textinhalt und einmal über ein data-text-Attribut, das die Pseudo-Elemente mit content: attr(data-text) auslesen.

Quelle: CSS Pseudo-Elements Module Level 4, W3C — definiert die Pseudo-Elemente ::before/::after und die attr()-Funktion, auf denen dieser Effekt aufbaut.

Warum sollte man es nutzen?

Live animierte Vorschau — sieh den tatsächlichen Glitch-Effekt beim Tippen und Anpassen der Einstellungen, nicht nur ein statisches Mockup.
Zwei unabhängig einstellbare Akzentfarben, standardmäßig das klassische Rot/Cyan, aber anpassbar an jede Marke oder jedes Thema.
Der Intensitätsregler steuert den Pixelversatz des Farbschattens, der Geschwindigkeitsregler die Zyklusdauer der clip-path-Keyframes.
Kopiert sowohl das CSS (inklusive vollständiger @keyframes-Blöcke) als auch die exakt benötigte HTML-Struktur, da der Effekt von einem data-text-Attribut abhängt, das dem sichtbaren Text entspricht.
Reines CSS — kein JavaScript zur Laufzeit nötig, sobald es auf deiner Seite ist, und keine externen Bibliotheken oder Bilder zu laden.
Kostenlos, keine Anmeldung, läuft komplett im Browser.

Anleitung

Gib den Text, den du glitchen möchtest, in das Textfeld ein — die Live-Vorschau aktualisiert sich sofort.
Wähle zwei Akzentfarben; klassischer Standard ist Rot und Cyan für einen Retro-RGB-Split-Look, aber jedes kontrastreiche Farbpaar funktioniert.
Stelle den Intensitätsregler ein, um zu steuern, wie weit die beiden Farbebenen auseinanderliegen — höhere Werte wirken aggressiver.
Stelle den Geschwindigkeitsregler ein, um zu steuern, wie schnell der Glitch flackert.
Kopiere den CSS-Block und füge ihn in dein Stylesheet ein.
Kopiere den HTML-Ausschnitt und verwende ihn genau so — das data-text-Attribut muss exakt dem sichtbaren Text des Elements entsprechen, damit der Effekt funktioniert.

Beispiel

Eingabe

Text: "GLITCH" · Farbe 1: #ff0040 (Rot) · Farbe 2: #00fff9 (Cyan) · Intensität: 5px

Ausgabe

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

Der Basistext bleibt weiß, während seine beiden Pseudo-Element-Kopien auf beiden Seiten rot und cyan aufflackern — der klassische Look eines gestörten Signals.

Warum das Element ein data-text-Attribut braucht

::before- und ::after-Pseudo-Elemente können den regulären Textinhalt eines Elements nicht direkt auslesen — content: attr() in CSS funktioniert nur mit echten HTML-Attributen, nicht mit untergeordneten Textknoten. Deshalb wiederholt das generierte HTML den Text als data-text="..."-Attribut am selben Element: Der sichtbare Text wird normal gerendert, während jedes Pseudo-Element unabhängig denselben String über content: attr(data-text) abruft und seine eigene farbverschobene, animierte Kopie darüberlegt.

Wie das Flackern entsteht

Jedes Pseudo-Element wird mit einem eigenen @keyframes-Block animiert, der eine Reihe von clip-path: inset(...)-Werten durchläuft. Bei jedem Keyframe wird ein anderer horizontaler Streifen der farbigen Kopie sichtbar, während der Rest abgeschnitten wird — so springt der sichtbare Rot- (oder Cyan-)Splitter während der Animation vertikal umher. In Kombination mit dem farbigen Schattenversatz liest sich das wie zerrissene, versetzte Farbkanäle statt eines sanften Leuchtens.

Wo dieser Effekt passt

Hero-Überschriften auf Gaming-, Cyberpunk-, Streaming- oder Musikmarken-Landingpages.
404-/Fehlerseiten, bei denen ein Glitch das Thema 'etwas ist kaputt' unterstreicht.
Hover- oder Fokus-Zustände einer Überschrift oder eines Logos für einen kurzen, aufmerksamkeitsstarken Akzent.
Lade- oder 'Verarbeitungs'-Zustände, bei denen ein Glitch Systemaktivität signalisiert.
Sparsam auf Fließtext anwenden — der Effekt ist absichtlich schwer auf einen Blick lesbar und funktioniert daher am besten bei kurzen Überschriften oder Logotypen, nicht bei Absätzen.

Kombination mit anderen CSS-Tools

Eine Glitch-Überschrift ist oft nur ein Element in einem größeren dunklen, kontrastreichen Layout. Kombiniere sie mit einem sanften Schattenglühen oder abgerundeten Card-Kanten aus den anderen CSS-Tools unten für einen abgerundeteren Look.

→ Box-Shadow-Generator · Border-Radius-Generator

Häufig gestellte Fragen

Warum sind Rot und Cyan die Standardfarben?

Rot und Cyan imitieren die klassische RGB-Kanalverschiebung, die bei gestörtem Analogvideo und frühen digitalen Signalfehlern auftritt — daher stammt ursprünglich die visuelle Sprache des 'Glitch'-Effekts. Du kannst beliebige zwei Farben einsetzen, aber stark kontrastierende Farbtöne lesen sich am deutlichsten als Farbtrennung.

Braucht dieser Effekt JavaScript?

Nein — sobald das CSS auf deiner Seite liegt, ist der Glitch eine reine, von @keyframes gesteuerte CSS-Animation. JavaScript wird nur von diesem Tool selbst in deinem Browser genutzt, um die Live-Vorschau zu aktualisieren und den kopierbaren Code zu erzeugen.

Warum zeigt sich der Effekt nicht, wenn ich das CSS in mein Projekt einfüge?

Die häufigste Ursache ist ein fehlendes oder abweichendes data-text-Attribut. Die Pseudo-Elemente rendern, was auch immer in data-text="..." am Element steht, nicht den eigenen Textinhalt des Elements — beide müssen also gesetzt sein und exakt übereinstimmen, auch bei Groß-/Kleinschreibung.

Kann ich das auf eine Überschrift wie h1 statt auf ein div anwenden?

Ja — die Technik funktioniert auf jedem Inline- oder Block-Element, das ::before-/::after-Pseudo-Elemente und ein data-text-Attribut zulässt. Wende einfach dieselbe Klasse und dasselbe data-text-Attribut auf dein h1, span oder ein anderes Element statt auf ein div an.

Schadet ein starker Glitch-Effekt der Barrierefreiheit oder dem SEO?

Der zugrunde liegende Textinhalt bleibt echter, auswählbarer Text, sodass Screenreader und Suchmaschinen ihn unabhängig von der visuellen Animation normal lesen. Für bewegungsempfindliche Nutzer solltest du prefers-reduced-motion berücksichtigen, um die Animation für diese Nutzer zu deaktivieren oder zu verlangsamen.