Zum Inhalt springen
Musterli

Animierter Farbverlauf

Wandernde, drehende und farbwechselnde Verläufe und schwebende Flecken als reines CSS. CSS, Tailwind oder HTML kopieren, PNG und GIF exportieren.

Generator öffnen

Läuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.

Beispielmotiv aus dem Animierter Farbverlauf

Mit einem Preset starten

Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.

Worum geht’s?

Ein animierter Farbverlauf ist ein Hintergrund, der sich langsam bewegt: Der Verlauf wandert, dreht sich, wechselt seine Farben, oder weiche Flecken schweben darüber. Musterli schreibt ihn als reines CSS mit Keyframes, ohne JavaScript und ohne Video. So bleibt er leicht und in jeder Grösse scharf.

So geht’s

Wähl Wandern, Drehen, Farbwechsel oder Flecken, such deine Farben aus und stell Dauer, Beschleunigung und Richtung ein. Die Leertaste würfelt neue Farben und eine neue Anordnung der Flecken. Die Vorschau zeigt das echte CSS. Kopier danach das CSS, ein HTML-Beispiel oder Tailwind-Klassen, exportier ein Standbild als PNG, JPG, WebP oder SVG oder die ganze Schleife als GIF.

Animierter Farbverlauf jetzt ausprobieren

Häufige Fragen

Was passiert bei Menschen, die weniger Bewegung wünschen?
Jeder Code-Export enthält eine Regel für prefers-reduced-motion. Wer im System weniger Bewegung einstellt, sieht einen ruhigen, stehenden Verlauf, genau das erste Bild der Animation. Die Vorschau hier verhält sich gleich.
Welche Browser können drehende und farbwechselnde Verläufe?
Sie nutzen @property. Das können Chrome und Edge ab Version 85, Safari ab 16.4 und Firefox ab 128. Ältere Browser zeigen einen stehenden Verlauf statt eines kaputten Hintergrunds.
Macht die Animation meine Website langsam?
Die Flecken bewegen sich nur mit transform, das erledigt der Browser auf der Grafikkarte. Wandern, Drehen und Farbwechsel zeichnen den Hintergrund neu. Setz sie darum lieber für einen grossen Bereich ein als für viele kleine Elemente. Längere Dauern wirken ohnehin ruhiger.
Wie nutze ich das mit Tailwind?
Der Tailwind-Export liefert Klassen mit Arbitrary Values und einen Hinweis, die Keyframes zu ergänzen. Für Tailwind v4 gibt es eine @theme-Fassung mit --animate-* und den Keyframes. Dann schreibst du einfach animate-gradient-pan.
Bekomme ich die Animation auch als Bild?
PNG, JPG, WebP und SVG zeigen den ruhigen Anfangszustand. Der GIF-Export zeichnet die ganze Schleife Bild für Bild und nahtlos, für Orte ohne CSS wie E-Mails oder Chats.

Fertige Farbverläufe

Über 30 eigene Verläufe mit CSS-Code zum Kopieren, jeder direkt im Editor anpassbar.

Zur Verlaufssammlung

Passende Generatoren

Alle Generatoren in CSS-Effekte und Layouts