Die meisten Farbverlauf-Tools liefern dir nur eine Zeile CSS. Dieses hier zeichnet den Verlauf auf ein echtes Canvas und lässt dich das fertige PNG herunterladen in genau der Pixelgröße, die du brauchst: ein Wallpaper fürs Handy, ein Desktop-Hintergrund in 1920x1080, ein quadratischer Social-Media-Post oder eine eigene Größe. Es wird nichts hochgeladen: Das Bild wird komplett auf deinem Gerät gezeichnet und gespeichert, deine Farben und Dateien bleiben also privat.
Kostenloser Farbverlauf-Generator
Läuft komplett in deinem Browser - kein Upload, keine Anmeldung.
Typ
Bildgröße
px
Farbstopps
Speichert ein echtes PNG in 1920×1080 px
Was ist ein Farbverlauf-Generator?
Ein Farbverlauf-Generator ist ein Tool, das zwei oder mehr Farben zu einem weichen Verlauf mischt und ihn als herunterladbares Bild exportiert. Wähle deine Farben und Farbstopps, entscheide dich für linear oder radial, lege die Größe fest und speichere ein PNG für ein Wallpaper, einen Hintergrund, ein Banner oder eine Miniaturansicht. Alles läuft direkt in deinem Browser.
So funktioniert’s
- 1Linear oder radial wählen. Linear mischt die Farben entlang einer geraden Linie im eingestellten Winkel; radial breitet sie kreisförmig von der Mitte nach außen aus.
- 2Farben und Farbstopps festlegen. Klicke auf ein Farbfeld, um eine Farbe zu wählen, und ziehe den Regler, um den Farbstopp zu verschieben. Füge bis zu 8 Farbstopps hinzu oder reduziere auf minimal 2, und klicke auf Zufällig für eine schnelle Idee.
- 3Bildgröße festlegen. Tippe auf eine Vorlage (Desktop, Handy, Quadrat, Social Media) oder gib eine eigene Breite und Höhe in Pixeln ein. Die Vorschau aktualisiert sich live.
- 4PNG herunterladen. Klicke auf PNG herunterladen, um den Farbverlauf als Bild in voller Auflösung zu speichern, oder kopiere das CSS, um denselben Verlauf im Code wiederzuverwenden.
Für wen
- Designer und Content-Creator, die ein sauberes Farbverlauf-Hintergrundbild für eine Folie, eine Miniaturansicht, ein Banner oder eine Story brauchen, ohne Photoshop zu öffnen.
- Handy- und Desktop-Nutzer, die ein eigenes Farbverlauf-Wallpaper genau in der Auflösung ihres Bildschirms erstellen möchten.
- Entwickler, die ein leichtes Farbverlauf-PNG als Platzhalter oder Hero-Bild brauchen, plus das passende CSS, um es im Code nachzubauen.
- Social-Media-Manager, die markenkonforme Farbverlauf-Hintergründe in den passenden Größen für Beiträge, Stories und Titelbilder exportieren.
Häufige Fragen
Ist dieser Farbverlauf-Generator kostenlos?
Ja, zu 100% kostenlos, ohne Anmeldung, ohne Wasserzeichen und ohne Limits. Erstelle und lade so viele Farbverlauf-Bilder herunter, wie du willst.
Wird irgendetwas an einen Server hochgeladen?
Nein. Der Farbverlauf wird komplett in deinem Browser mit Canvas gezeichnet und gespeichert. Es werden keine Farben, Bilder oder Nutzungsdaten irgendwohin gesendet.
In welchem Bildformat wird exportiert?
Es wird als PNG exportiert, wodurch der Verlauf perfekt weich und verlustfrei bleibt, ganz ohne Kompressionsartefakte. Die Datei wird in der vollen Pixelgröße gespeichert, die du festgelegt hast, bereit zur Nutzung als Wallpaper, Hintergrund oder zum Hochladen.
Welche Größe sollte ich für ein Farbverlauf-Wallpaper wählen?
Passe sie an deinen Bildschirm an. Gängige Werte sind 1920x1080 für die meisten Desktop-Bildschirme, 1080x1920 für ein Handy im Hochformat und 1080x1080 für einen quadratischen Social-Media-Post. Du kannst auch jede beliebige eigene Breite und Höhe bis zu 8000 Pixel eingeben.
Was ist der Unterschied zwischen einem linearen und einem radialen Farbverlauf?
Ein linearer Farbverlauf mischt die Farben entlang einer geraden Linie im gewählten Winkel, die Farbe verändert sich also quer über das Bild. Ein radialer Farbverlauf beginnt an einem Mittelpunkt und breitet sich kreisförmig nach außen aus, die Farbe ändert sich also von der Mitte zu den Rändern.
Bekomme ich auch das CSS zusätzlich zum Bild?
Ja. Neben dem herunterladbaren PNG zeigt das Tool das passende background-image-CSS an. Kopiere es, um genau denselben Farbverlauf auf einer Website oder in einer App nachzubauen, statt die Bilddatei zu verwenden.
Wie funktionieren Farbstopps?
Jeder Farbstopp verbindet eine Farbe mit einer Position von 0% bis 100% entlang des Verlaufs. Der Übergang verläuft weich zwischen benachbarten Farbstopps. Setzt man zwei Farbstopps auf dieselbe Position, entsteht statt eines weichen Übergangs eine harte Kante, was sich gut für Streifen oder Farbblock-Hintergründe eignet.