Glitch-Text-Generator
Glitch-Effekt für Überschriften: Farbkanäle, Versatz, Tempo und Schnitte einstellen, live ansehen und reines CSS kopieren.
Der Glitch-Text-Generator erzeugt den typischen Störungs-Effekt mit versetzten Farbkanälen für Überschriften. Du stellst Text, Schrift- und Hintergrundfarbe, die beiden Kanalfarben, Versatz, Tempo und die Zahl der Schnitte ein. Der Effekt nutzt nur CSS mit Pseudo-Elementen und clip-path und stoppt bei reduzierter Bewegung.
<p class="glitch" data-text="GLITCH">GLITCH</p>Glitch-Text nur mit CSS
Der Glitch-Effekt imitiert ein gestörtes Videosignal. Er besteht aus drei Ebenen: dem Originaltext und zwei verschobenen, eingefärbten Kopien, von denen per Animation immer nur schmale Streifen sichtbar sind.
- Kopien per
::beforeund::aftermitattr(data-text). - Versatz nach links und rechts mit farbigem
text-shadow. - Streifen per
clip-path: inset()in Keyframes wechseln.
Ruhigere Effekte für Überschriften findest du im Text-Shadow-Generator und im Text-Animation-Generator.
Häufige Fragen
Wie funktioniert der Glitch-Effekt?
::before und ::after kopieren den Text per content: attr(data-text), werden leicht verschoben und bekommen je einen farbigen Schatten. Eine Animation schneidet per clip-path: inset() wechselnde Streifen aus den Kopien, sodass der Text zu flackern scheint.
Warum muss data-text dem Text entsprechen?
Die Pseudo-Elemente können den Inhalt des Elements nicht direkt lesen, nur Attribute. Steht im data-text etwas anderes, passen die Störstreifen nicht zum Text.
Warum brauchen die Kopien eine Hintergrundfarbe?
Sie decken den Originaltext in den ausgeschnittenen Streifen ab. Die Farbe muss deshalb genau dem Hintergrund hinter der Überschrift entsprechen, sonst entstehen sichtbare Balken.
Ist der Effekt problematisch für die Barrierefreiheit?
Schnelles Flackern kann Menschen mit Migräne oder Epilepsie belasten. Halte das Tempo moderat, setze den Effekt sparsam ein und belasse die Regel für prefers-reduced-motion im Code.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.