Backgrounds Supply bietet mit Gradient Lab mehr als 20 animierte Verlaufsmuster im Browser an, exportiert die Verläufe als Video bis 4K und verlangt dafür kein Konto. Der Einbettungscode lädt allerdings ein Analyse-Skript von Microsoft mit, das Backgrounds Supply in seiner Datenschutzerklärung nicht aufführt.
Ein Klick · kostenlosDr. Web bei Google bevorzugenMarkieren Sie drweb.de als bevorzugte Quelle. Dann sehen Sie unsere Artikel öfter unter den Top-Meldungen.Jetzt hinzufügenStellen Sie sich vor, Ihre Agentur baut einer Kanzlei die neue Startseite, und im Kopfbereich zieht ein Verlauf in Petrol und Sand durchs Bild. Der Code stammt aus Gradient Lab. Mit dem Verlauf lädt der Browser jedes Besuchers auch Microsoft Clarity, im Cookie-Banner der Kanzlei taucht der Dienst nicht auf.
Das Wichtigste in Kürze
- Gradient Lab läuft kostenlos im Browser, ohne Konto und ohne Wasserzeichen.
- Exportiert werden PNG-Bilder oder Videos in MP4 und WebM, bis 4K und 30 Sekunden.
- Die eingebettete Seite von Backgrounds Supply lädt das Skript von Microsoft Clarity.
- Ein selbst gehostetes Video oder ein CSS-Verlauf kommt ohne fremden Server aus.
Was kann Gradient Lab?
Gradient Lab erzeugt bewegte Farbverläufe direkt im Browser und speichert das Ergebnis als PNG oder als Video bis 3840 × 2160 Pixel, kostenlos und ohne Wasserzeichen. Die Ergebnisse dürfen Sie laut Backgrounds Supply auch kommerziell und ohne Namensnennung verwenden.[1]
Mehr als 20 Effektvorlagen stehen zur Wahl, vom weich fließenden Verlauf bis zu Rauch, Plasma und Glas. Die Farben lassen sich aus einem eigenen Bild übernehmen und wahlweise in den Farbräumen sRGB, OKLab oder OKLCH mischen. Alle Einstellungen stehen in der Adresszeile, ein Link reicht zum Teilen.[1]
Neu ist ein Zeichenmodus, in dem gezeichnete Formen zu einem Verlauf verschmelzen.[1] Genau diese Bindung der Farbe an die Form vermisste Wojciech Dobry bei den gängigen Design-Werkzeugen und ihren vier Verlaufstypen. Geld verdient Backgrounds Supply mit einer Bibliothek aus 1.273 Hintergründen, die einmalig rund 43 € kostet.[2]
Welche Alternativen bieten sich an?
Die bekannteste quelloffene Alternative heißt ShaderGradient: ein Figma-Plugin, eine Framer-Komponente und ein React-Paket unter MIT-Lizenz. Auf GitHub zählt das Projekt 2.981 Sterne, die letzte Aktualisierung stammt vom 23. September 2026.[3]
ShaderGradient setzt auf React Three Fiber und three.js, die 3D-Bibliotheken landen also im JavaScript der eigenen Website.[3] Dass eine weiterlaufende Animation Rechenzeit kostet, hat Shan Hannadige beim Messen der eigenen Ladezeit belegt. Für ruhende Verläufe genügt CSS ohne Bibliothek. Mit dem Zusatz in oklch legen Sie in linear-gradient() fest, in welchem Farbraum der Browser die Farben mischt.[4]
Gradient Lab in Zahlen
Was beim Einbau passiert
linear-gradient(in oklch, …)Ein kostenloser Verlauf ist schnell kopiert, die Verantwortung für das mitgelieferte Skript trägt trotzdem der Betreiber der Website.
Michael Dobler, Herausgeber Dr. Web
Was bedeutet der Einbettungscode für deutsche Websites?
Der Code bindet per iframe eine Seite von backgrounds.supply ein, und diese Seite lädt das Analyse-Skript von Microsoft Clarity, ohne nach einer Einwilligung zu fragen. Dr. Web hat den Quelltext der Einbettungsseite am 26. Oktober 2026 geprüft.[5] Backgrounds Supply nennt in der Datenschutzerklärung vom 18. Januar 2026 Google Analytics und Hotjar, Clarity fehlt dort.[6]
Microsoft verlangt seit dem 31. Oktober 2025 für Besucher aus EU, Großbritannien und der Schweiz, dass die Website Clarity deren Einwilligung übermittelt. Fehlt die Zustimmung, setzt Clarity keine Cookies und vergibt je Seitenaufruf eine neue Kennung.[7] Der Browser verbindet sich trotzdem mit Microsofts Server und überträgt dabei die IP-Adresse. Das Landgericht München I wertete 2022 eine solche Weitergabe an Google beim Laden von Google Fonts als Rechtsverstoß, weil sich die Schrift auch vom eigenen Server ausliefern lässt.[8]
Exportieren Sie den Verlauf deshalb besser als Video und legen Sie die Datei auf Ihren eigenen Server, statt den iframe einzubinden. Prüfen Sie auch, ob Ihre Datenschutzerklärung jeden eingebetteten Fremddienst nennt. Die Regeln für Cookie-Banner verhandeln die EU-Staaten derzeit neu.
Quellen
8 Quellen anzeigenQuellen ausblenden
- Backgrounds SupplyGradient Lab: Gradient Background Generator
- Backgrounds SupplyGradient, AI & Animated Backgrounds (Startseite mit Preisangabe)
- GitHubruucm/shadergradient: Create beautiful moving gradients on Framer, Figma and React
- MDN Web Docs<color-interpolation-method>
- Backgrounds SupplyEinbettungsseite von Gradient Lab (Quelltext abgerufen am 26. Oktober 2026)
- Backgrounds SupplyPrivacy Policy (Stand 18. Januar 2026)
- Microsoft LearnClarity Cookie Consent API: ConsentV2
- Bayern.RechtLG München I, Endurteil vom 20.01.2022, 3 O 17493/20
Mehr Newshunger?
- EditUI: UI-Korrekturen per Klick sammeln und in Claude Code oder Cursor einfügen
- Unperfekt mit Absicht: Manuel Muñoz Solera baut seine Website aus schiefen Spielmodulen
- 117 CSS-Texteffekte zum Kopieren: Colorion-Bibliothek kommt ohne JavaScript aus
- Eine Flamme braucht drei Sinuswellen: Carmen Ansio animiert ein Streichholz in Canvas
- Poline: Schweizer Open-Source-Tool für Farbpaletten gewinnt den Swiss Design Award
- Cavalry: Kostenlose prozedurale Motion-Design-Software mit Lottie-Export fürs Web
