Verarbeite bis zu 200 Bilder pro Auftrag — Einstellungen einmal wählen, alle ausführen.
Wählen Sie zwei oder mehr Farben, ziehen Sie den Verlauf nach Geschmack, kopieren Sie das CSS. Oder laden Sie es als PNG herunter, um es als Hintergrundbild, für Folienhintergründe oder als Hintergrund für Social-Media-Beiträge zu verwenden. Lineare, radiale und konische Verläufe werden alle unterstützt, plus ein Mesh-Verlaufsmodus für die weichen Apple-ähnlichen Hintergründe, die Sie in modernen Benutzeroberflächen sehen.
Verlaufstypen erklärt
- Linear: Gerade Linie von Farbe A zu Farbe B. Richtungswähler (oben→unten, diagonal usw.).
- Radial: konzentrisch — Farbe A in der Mitte, die zu Farbe B an den Rändern übergeht. Nützlich für Spotlichteffekte.
- Konisch: kreist um einen Mittelpunkt wie ein Farbkreis. Trendig im modernen UI-Design.
- Mesh (Premium): mehrere Farbkleckse, die sanft miteinander verschmelzen. Der „Apple-Verlauf“-Look.
Was Sie kopieren können
- CSS: fertig zum Einfügen
linear-gradient(...) oder background-image:-Deklaration.
- Tailwind: die nächstgelegene
bg-gradient-*-Klasse plus benutzerdefinierte Farbzusätze.
- SVG: für skalierbare Verwendung in Symbolen oder UI-Grafiken.
- PNG-Download: jede Größe, einschließlich Handy-Hintergrundbild (1284×2778), Desktop (3840×2160) und Quadrat (1080×1080).
Häufige Anwendungsfälle
- Handy-Hintergrundbilder: Mesh-Verläufe sind auf iOS sehr beliebt. Testen Sie unsere iPhone-Hintergrundbildvorschau.
- Social-Media-Post-Hintergründe: sofortiger markengerechter Look für Zitatgrafiken.
- Hero-Bereiche: Verlaufshintergründe sind auf Landingpages allgegenwärtig.
- Folienpräsentationen: Ersetzen Sie langweilige einfarbige Hintergründe.
Farben auswählen, die funktionieren
Benachbarte Farben im Farbkreis = dezent, harmonisch. Gegenüberliegende = kühn, aufmerksamkeitsstark. Fügen Sie einen dritten Mittelstopp hinzu, um eine große Lücke zu überbrücken. Für markentreue Verläufe fügen Sie Ihr Marken-HEX ein und wählen Sie eine Aufhellung oder Abdunklung für den zweiten Stopp. Verwenden Sie unseren Farbkonverter, um Aufhellungen (HSL mit höherer Helligkeit) oder Abdunklungen (niedriger) zu finden.
Häufig gestellte Fragen
Kann ich diese in der Produktion verwenden?
Ja — kopiertes CSS funktioniert in jedem modernen Browser. SVG-Fallbacks werden für ältere Browser bereitgestellt.
Wie sieht es mit der Browserunterstützung für radiale Verläufe aus?
Universell in modernen Browsern. Die CSS-Syntax ist eine Zeile.
Wie groß kann ich das PNG exportieren?
Kostenlos: bis zu 4K (3840×2160). Premium: 8K und mehr.
Sind Netzverläufe schwer zu verwenden?
Im Web basieren sie auf SVG oder Canvas. Wir liefern Ihnen ein flaches PNG zur einfachen Verwendung sowie die SVG-Quelle zur Bearbeitung.
Kann ich meine Farbverläufe speichern?
Melden Sie sich (kostenlos) an und gespeicherte Farbverläufe erscheinen in Ihrer Bibliothek.
Was ist ein 'konischer Farbverlauf'?
Schwenkt um einen Punkt — wie ein Farbkreis oder ein Kuchendiagramm. Modernes CSS unterstützt es nativ.
Funktioniert es für animierte Verläufe?
Nur statischer Export. Für animierte Hintergründe kopieren Sie das CSS und fügen Sie eine CSS-Animation um den Gradientenwinkel hinzu.
Warum nicht einfach CSS von Hand schreiben?
Das kannst du — das Tool macht die visuelle Iteration nur schneller. Kopieren und anpassen.
Über Gradient Generator
Gradient Generator ist ein kostenloses Online-Tool von Wallpapers.com, das vollständig in deinem Browser läuft – keine Installation, kein Wasserzeichen, keine E-Mail-Registrierung für den ersten Versuch.
Erstellen Sie lineare oder radiale Verläufe mit CSS-Ausgabe zum Kopieren und Einfügen.
So funktioniert's Gradient Generator
- Wähle eine Farbe aus dem Muster aus oder füge einen HEX- / RGB-Wert ein.
- Passe die Ausgabe an — Palette, Kontrast, Komplementärfarben.
- Kopiere den Wert oder exportiere das Muster als JSON.
Wann verwenden?
Häufige Anwendungsfälle sind:
Vorbereitung von Bildern für den Web-Upload, E-Commerce-Listings, Social-Media-Plattformen mit Formatbeschränkungen und Konvertieren von Dateien von einem Gerät oder einer App in eine andere.
Gratis vs. Premium
Jeder Besucher erhält eine kostenlose Testversion; angemeldete kostenlose Benutzer erhalten ein höheres tägliches Kontingent. Abonniere
Premium
für unbegrenzte Läufe, Stapelverarbeitung von bis zu 200 Bildern pro Auftrag, Prioritätswarteschlange und werbefreies Surfen.
Verwandte Tools
Suchst du etwas anderes? Probiere den
Farbwähler aus Bild
,
Palette Extractor – Die 5 dominanten Farben aus jedem Bild extrahieren
oder
Graustufen-Konverter – Kostenloses Schwarz-Weiß-Foto-Tool
— oder alle durchstöbern
Farbwerkzeuge Tools.
