Die Kurzfassung
- Ein animierter Farbverlaufshintergrund ist ein Farbübergang, der sich über die Zeit bewegt, meist indem seine Position driftet, seine Form sich ändert, der Farbton wandert oder das Licht atmet.
- Ruhige animierte Farbverläufe bewegen ein oder zwei Eigenschaften langsam und brauchen für einen ganzen Zyklus mehrere Sekunden oder mehr, denn alles gleichzeitig zu bewegen wirkt unruhig.
- Farben, die im Farbkreis nah beieinanderliegen, laufen sauber, während Gegenfarben beim Überblenden durch Grau gehen können.
- Text über einem animierten Farbverlauf muss in jedem Moment des Loops lesbar sein, auch in den hellsten und dunkelsten Bildern.
- Exportiere animierte Farbverläufe für Social und Video als nahtlose Loops in MP4, mit einem Standbild für Orte, an denen kein Video läuft.
Auf dieser Seite
Ein animierter Farbverlaufshintergrund ist ein Farbübergang, der sich bewegt: Er driftet durchs Bild, ändert seine Form, verschiebt den Farbton oder wird heller und dunkler, meist als Loop hinter Worten oder einem Produkt. Die besten sehen aus wie Licht, das durch ein Material wandert. Die schwachen sehen aus wie ein Bildschirmschoner. Der Unterschied liegt nicht in der Software, sondern in ein paar Entscheidungen darüber, was sich bewegt, wie schnell und in welchen Farben.
Dieser Artikel behandelt die Designseite, für Video, Social-Posts und Bildschirme. Baust du einen in Code für eine Website, lies animierte Farbverläufe in CSS und Shader-Farbverläufe.
Was sich in einem animierten Farbverlauf bewegen kann
Jeder animierte Farbverlauf ist eine Kombination aus fünf Arten von Veränderung. Die meisten guten nutzen eine, manchmal zwei. Alle fünf gleichzeitig zu nutzen ist der schnellste Weg, einen Hintergrund unruhig wirken zu lassen.
| Was sich bewegt | Was du siehst | Wirkung |
|---|---|---|
| Position | Die ganze Fläche gleitet oder driftet | Ruhig, weit, filmisch |
| Form | Farbflecken schwellen an, falten sich oder fließen ineinander | Organisch, flüssig |
| Farbton | Farben neigen sich in eine Richtung und zurück oder wandern um den Kreis | Saisonal, verspielt, bei Tempo energiegeladen |
| Licht | Die Helligkeit atmet ein und aus | Ruhig, luxuriös |
| Körnung und Partikel | Feine Textur flimmert oder driftet über der Farbe | Haptisch, filmisch, atmosphärisch |
Wie schnell sich ein animierter Farbverlauf bewegen sollte
Das Tempo bestimmt den größten Teil der Stimmung. Langsame Bewegung wirkt hochwertig und selbstsicher, schnelle wirkt dringlich. Bei einem Hintergrund hinter Worten sollte ein ganzer Zyklus der Veränderung meist viele Sekunden dauern, nicht eine oder zwei. Kannst du die Bewegung beim Lesen der Überschrift deutlich verfolgen, ist sie wahrscheinlich zu schnell.
Bewegung sollte außerdem sanft anlaufen und auslaufen, statt in einem Tempo durchzutakten. Änderungen, die weich beginnen und enden, wirken natürlich, konstantes Tempo wirkt mechanisch. Easing erklärt warum, mit Beispielen.
Farben, die gut animieren
Animation zeigt dir jede Zwischenfarbe eines Farbverlaufs, eine nach der anderen. Ein stehender Farbverlauf kann einen matten Mittelpunkt in einem schmalen Band verstecken, ein bewegter verweilt dort. Am sichersten sind analoge Farbpaletten: Nachbarn im Farbkreis wie Indigo, Violett und Pink oder Türkis, Grün und Limette. Ihre Zwischenfarben bleiben lebendig.
Brauchst du Gegenfarben, leite sie über eine Brückenfarbe wie im mittleren Beispiel, oder lies warum Farbverläufe in der Mitte grau werden. Behalte eine Farbe als Grund, die sich kaum ändert, meist die dunkelste. Sie verankert die Bewegung und gibt den Worten einen stabilen Platz.
Text über einem bewegten Farbverlauf lesbar halten
Text auf einem stehenden Farbverlauf muss nur gegen einen Hintergrund bestehen. Über einem animierten muss er gegen jedes Bild des Loops bestehen. Der klassische Fehler ist eine Überschrift, die am Anfang völlig klar ist und für zwei Sekunden verschwindet, wenn ein heller Farbfleck dahinter vorbeidriftet.
Vermeide
- Den Kontrast nur im ersten Bild prüfen
- Helle Farbflecken, die durch die Worte driften
- Den Text ebenso bewegen wie den Hintergrund
- Große Farbtonzyklen hinter Text in Fließtextgröße
Mach
- Den Loop durchscrubben und die hellsten und dunkelsten Momente prüfen
- Den ruhigsten Teil der Fläche hinter den Worten halten
- Die Worte stillhalten und die Farbe bewegen
- Starke Farbwechsel für Hintergründe mit kurzen Überschriften aufsparen
Manche Tools helfen dabei. Bei Gradiently weiß der Mark hinter einem Design, wo die Worte stehen, und sein ruhigster, kontrastreichster Bereich bleibt beim Bewegen dahinter. Die allgemeinen Prinzipien stehen in Text auf einem Farbverlauf platzieren.
So gestaltest du einen animierten Farbverlauf, Schritt für Schritt
- 1
Gestalte das Standbild
Wähle den Grund, drei bis fünf Farben und das Layout der Worte. Es sollte als Standbild funktionieren, bevor es sich bewegt.
- 2
Wähle eine führende Bewegung
Driften, Fließen, eine Farbtonverschiebung oder atmendes Licht. Passe sie zur Marke an: Ruhige Marken driften, lebhafte können fließen oder wirbeln.
- 3
Setze ein langsames Tempo
Starte langsamer, als sich natürlich anfühlt, und werde nur schneller, wenn die Bewegung kaum auffällt.
- 4
Mach einen Loop daraus
Das letzte Bild muss ins erste zurückführen. Nahtlose Loops zeigt, wie.
- 5
Prüfe jeden Moment
Scrubbe durch den Loop und halte an den hellsten und dunkelsten Stellen an, um die Worte zu prüfen.
- 6
Exportiere für den Ort, an dem es läuft
MP4 für Social und Websites, ein GIF nur für E-Mail und ein PNG-Standbild für alles andere. GIF oder MP4 erklärt die Wahl.
Eine vertikale Story ist das natürliche Zuhause eines animierten Farbverlaufs: kurze Worte stehen still, dahinter bewegt sich die Farbe.
Wo animierte Farbverlaufshintergründe am besten funktionieren
- Stories und Reels, wo Video erwartet wird. Halte Worte in den Sicherheitsbereichen, siehe Hintergründe für Reels und TikTok.
- Feed-Posts für Ankündigungen und Angebote, wo Bewegung den Post abhebt.
- Website-Header, als kurzes stummes Video oder als Live-Hintergrund, mit einem Standbild als Rückfall. Videohintergründe auf Websites behandelt die Details.
- Bühnen- und Ladenbildschirme, auf denen lange, langsame Loops stundenlang laufen.
- Video-Intros und -Outros, als ruhige Fläche hinter einem Titel.
Wenn du Gradiently nutzt, kann jedes Design als Loop von 5 bis 30 Sekunden exportiert werden: Wähle eine Bewegung wie Driften, Fließen, Atmen oder Wirbeln, ein Tempo, wie sich die Farbe verhält und ob Partikel darüber driften. Der Loop wird so gebaut, dass sein Ende auf seinen Anfang trifft.
Häufige Fragen
Was ist ein animierter Farbverlaufshintergrund?
Ein Farbübergang, der sich über die Zeit bewegt, driftet, fließt, den Farbton verschiebt oder Licht atmen lässt, meist als Loop hinter Worten, Produkten oder Video.
Wie schnell sollte sich ein animierter Farbverlauf bewegen?
Für die meisten Hintergründe langsam. Ein ganzer Zyklus der Veränderung sollte viele Sekunden dauern, und du solltest die Bewegung beim Lesen der Überschrift nicht bequem verfolgen können.
Welche Farben eignen sich am besten für einen animierten Farbverlauf?
Benachbarte Farbtöne wie Indigo, Violett und Pink animieren am saubersten. Gegenfarben brauchen eine Brückenfarbe dazwischen, sonst gehen sie durch Grau.
Wie halte ich Text auf einem animierten Farbverlauf lesbar?
Prüfe die Worte in den hellsten und dunkelsten Momenten des Loops, halte den ruhigsten Teil der Fläche dahinter und lass den Text stillstehen.
In welchem Format exportiere ich einen animierten Farbverlauf?
MP4 für soziale Plattformen und Websites. Nutze GIF nur dort, wo kein Video läuft, etwa in E-Mails, und halte ein PNG-Standbild als Rückfall bereit.
Geschrieben von Gradiently
Das Team hinter Gradiently, einem Designtool rund um Marks: lebendige Farbverläufe, durch die alles, was du gestaltest, nach dir aussieht.
Unser Profil ansehen
