Animated Gradient

Mehrere Farbpunkte verschmelzen weich miteinander und treiben dahin, sodass ein organischer, vielfarbiger Hintergrund entsteht.

Füge bei [wo] einen „Mesh Gradient“-Hintergrund hinzu (auch animated mesh gradient genannt).
Mehrere weiche Farbflecken sollen ineinanderfließen und langsam über die Fläche treiben, sodass sich der Hintergrund organisch ständig verändert: sehr langsam und fließend.
Sorge dafür, dass der Inhalt darüber bei jeder Farbmischung lesbar bleibt, und stoppe das Treiben bei reduzierter Bewegung (prefers-reduced-motion).

Weiche, verschwommene Farbbänder ziehen wie ein Polarlicht hinter dem Inhalt vorbei.

Füge bei [wo] einen „Aurora Background“ hinzu (auch northern lights gradient genannt).
Weiche, verschwommene Farbbänder sollen langsam hinter dem Inhalt treiben und schwingen, sich überlagern und ineinanderfließen wie Nordlichter: sehr langsam und verträumt.
Halte den Text darüber lesbar, berechne die Unschärfe nicht in jedem Frame neu, damit es flüssig bleibt, und stoppe das Treiben bei reduzierter Bewegung (prefers-reduced-motion).

Text mit einer Verlaufsfüllung, deren Farben sich ständig verschieben oder fließen.

Füge bei [wo] einen „Animated Gradient Text“-Effekt hinzu (auch aurora text oder rainbow text sweep genannt).
Die Buchstaben sollen mit einem Farbverlauf gefüllt sein, dessen Farben langsam und weich über den Text fließen, in einer endlosen, nahtlosen Schleife.
Halte den Text jederzeit gut lesbar vor seinem Hintergrund und lass die Farben bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Ein Raster aus Linien oder Quadraten, dessen Zellen ein- und ausblenden oder flackern.

Füge bei [wo] einen „Animated Grid Pattern“-Hintergrund hinzu (auch flickering grid oder grid background genannt).
Ein blasses Linienraster soll an Ort und Stelle bleiben, während einige verstreute Zellen zu unterschiedlichen Zeiten langsam ein- und ausblenden: leise und dezent, nie alle gleichzeitig.
Halte es hinter dem Inhalt, ohne Klicks abzufangen, und stoppe das Flackern bei reduzierter Bewegung (prefers-reduced-motion).

Dünne, leuchtende Linien wandern entlang von Pfaden und zerplatzen manchmal, wenn sie auf eine Fläche treffen.

Füge bei [wo] einen „Background Beams“-Effekt hinzu (auch light beams oder background lines genannt).
Blasse, geschwungene Pfade sollen im Hintergrund liegen, während kurze leuchtende Streifen nacheinander an ihnen entlangwandern, in ruhigem, gleichmäßigem Tempo.
Versetze die Strahlen zeitlich, damit sie sich nie im Gleichschritt bewegen, halte sie hinter dem Inhalt und stoppe sie bei reduzierter Bewegung (prefers-reduced-motion).