# Animierter Farbverlauf als Hintergrund für Video und Social [Canonical HTML page](https://gradiently.design/de/guide/animated-gradient-background) Ein animierter Farbverlauf kann aussehen wie Licht, das durch Seide wandert, oder wie ein Bildschirmschoner. Der Unterschied sind eine Handvoll Designentscheidungen, die du bewusst treffen kannst. ## The short version - 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. 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](https://gradiently.design/de/guide/css-animated-gradient) und [Shader-Farbverläufe](https://gradiently.design/de/guide/shader-gradients). ## 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 | Wähle eine führende Bewegung. Eine zweite, viel dezentere kann sie unterstützen. ## 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. - 0 s: Dämmerung: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%)` - 3 s: `linear-gradient(160deg, #1e1b4b 0%, #7c3aed 50%, #fb7185 100%)` - 6 s: am wärmsten: `linear-gradient(160deg, #312e81 0%, #a855f7 45%, #fb923c 100%)` - 12 s: zurück zur Dämmerung: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%)` Vier Momente einer langsamen Farbverschiebung. Das letzte Bild entspricht dem ersten, damit sich der Loop ohne Sprung wiederholen kann. 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](https://gradiently.design/de/guide/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. - Blau zu Orange: graue Mitte: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)` - Über Magenta: bleibt lebendig: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)` - Türkis zu Limette: Nachbarn: `linear-gradient(90deg, #0f766e 0%, #22c55e 50%, #bef264 100%)` Direkt überblendete Gegenfarben laufen durch ein mattes Grau. Ein Stopp dazwischen oder benachbarte Farbtöne halten die Farbe lebendig, während sie sich bewegt. Brauchst du Gegenfarben, leite sie über eine Brückenfarbe wie im mittleren Beispiel, oder lies [warum Farbverläufe in der Mitte grau werden](https://gradiently.design/de/guide/muddy-gradients). 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](https://gradiently.design/de/guide/text-on-gradient). ## 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](https://gradiently.design/de/guide/seamless-loop-video) 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](https://gradiently.design/de/guide/gif-vs-mp4) erklärt die Wahl. Eine vertikale Story, die auf einem bewegten Farbverlauf längere Öffnungszeiten den ganzen Winter ankündigt 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](https://gradiently.design/de/guide/reels-tiktok-backgrounds). - **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](https://gradiently.design/de/guide/video-background-website) 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. ## FAQ ### 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.