Aufgabenpfad / von der Eingabe zum Ergebnis
So erstellst du einen CSS-Text-Glitch-Effekt
- 01
Tippe den Vorschautext
Gib 1–32 Zeichen in Vorschautext ein — der Zähler neben dem Label verfolgt die Länge. Kurze, breite Wörter lesen sich am besten, sobald die Ebenen auseinanderdriften.
- 02
Lege die drei Farben fest
Textfarbe zeichnet die Basisebene, während Cyan-Kanal und Rot-Kanal die versetzten Repliken sind, die den chromatischen Saum erzeugen. Kanäle nahe reinem Cyan und Rot ergeben den klassischen chromatischen Look; gedämpfte Kanäle erzeugen eine subtilere, modernere Teilung.
- 03
Stimme die Glitch-Bewegung ab
Ebenenversatz (1–12 px) bestimmt, wie weit die Repliken driften, und Zyklusdauer (0,2–3 s) die Schleifengeschwindigkeit. Die Vorschau inszeniert alle drei Ebenen live.
- 04
Verstehe die drei Ebenen
Das Basiselement behält deine Textfarbe, während die Cyan-Replik auf den oberen Teil der Zeile beschnitten ist und die rote auf den unteren. Jede Replik läuft mit einer steps(2, end)-Animation — harte Sprünge statt weicher Gleiter —, was den Glitch wie eine Signalstörung wirken lässt.
- 05
Kopiere das Glitch-CSS
Drücke CSS kopieren oder .css herunterladen, um toolars-text-glitch.css zu speichern. Ein prefers-reduced-motion-Block liegt dem Export bei und bewahrt einen statischen Saum für bewegungssensible Besucher. Das Ausgabefeld zeigt die Live-Bytezahl, und beide Aktionen bleiben deaktiviert, solange der Text die Validierung nicht besteht.
- 06
Füge das data-text-Attribut hinzu
Die Repliken lesen ihren Inhalt aus attr(data-text), dein Element braucht also ein data-text-Attribut, das mit seinem sichtbaren Text identisch ist. Wenn sich der Text später ändert, aktualisiere beides — das Attribut ist es, was die Cyan- und Rot-Ebenen tatsächlich zeichnen. Das Attribut lebt auf demselben Element wie die Klasse, der ganze Effekt bleibt also ein einziges Tag.