ToolnozaDie Bewegung verstehen
Der CSS-Verlauf wird als Hintergrundbild auf 300 % vergrößert. Keyframes verschieben background-position zur Gegenseite und zurück. Dadurch scheinen die Farben durch das Element zu fließen.
Der Winkel bestimmt die Richtung des Verlaufs. Die Dauer beschreibt den gesamten Hin-und-zurück-Zyklus. Zehn Sekunden sind ein Ausgangspunkt; ähnliche Farben wirken meist ruhiger.
CSS anwenden
Stylesheet kopieren und class="animated-gradient" am Element ergänzen. Die Klasse erzeugt einen Hintergrund, aber weder Inhalt noch Höhe oder Textfarbe. Ein leeres Element ohne Höhe kann unsichtbar bleiben.
Die Pause betrifft nur die Vorschau. Im Export zum Abschalten die Animationsdeklaration entfernen oder animation: none setzen. Bei Namenskonflikten Klasse und Keyframes umbenennen.
Lesbarkeit und Bewegung prüfen
Der Export enthält prefers-reduced-motion für einen statischen Hintergrund bei entsprechender Systemeinstellung. Diese Regel beibehalten und auf überschreibende Styles achten.
Text über allen durchlaufenden Farben prüfen. Ein Kontrastprüfer bewertet Farbpaare, nicht die vollständige Animation. Eine einfarbige Textfläche ist verlässlicher. Auch auf einem Smartphone auf flüssige Darstellung prüfen.
Werkzeug verwenden
Drei Farben, Winkel und Zyklusdauer wählen. CSS kopieren und dem Element die Klasse animated-gradient zuweisen.
Rechenbeispiel
Ein blau-violett-türkiser Verlauf bei 135° und einem Zehn-Sekunden-Zyklus erzeugt einen bewegten Hintergrund.
Benötigt der Verlauf JavaScript?
Nein. Der Code verwendet CSS-Keyframes und eine Media Query. Das Element benötigt Größe oder Inhalt, damit sein Hintergrund sichtbar ist.