Kostenloser Farbverlauf-Hintergrundbild-Generator

Über Verläufe

CSS-Verläufe lassen Sie sanfte Farbübergänge ohne Bilder erzeugen, das reduziert die Dateigröße und verbessert die Performance. Dieses Tool erzeugt sowohl PNG-Dateien zur Verwendung als Wallpaper als auch CSS-Code, den Sie auf Websites einsetzen können.

Häufige Fragen

Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?

Lineare Verläufe verlaufen in einer geraden Linie in einem festgelegten Winkel. Radiale Verläufe verlaufen von einem zentralen Punkt nach außen. Konische Verläufe drehen sich wie ein Farbkreis um einen zentralen Punkt. Jeder erzeugt einen anderen visuellen Effekt.

Kann ich CSS-Verläufe auf meiner Website verwenden?

Ja! CSS-Verläufe werden in allen modernen Browsern unterstützt und benötigen keine Bilddateien. Sie skalieren unendlich, laden schneller und sehen auf jedem Bildschirm scharf aus. Kopieren Sie das von diesem Tool erzeugte CSS in Ihre Stylesheets.

Welche Auflösungen sind für mein Gerät am besten?

Desktop-Monitore nutzen typischerweise 1920×1080, Laptops variieren, 4K-Monitore 3840×2160, iPhones 1080×1920 und iPads 2048×2732. Wählen Sie die Auflösung, die zu Ihrem Gerät passt, für das schärfste Wallpaper.

Farbverläufe im Web, eine kurze Geschichte

Farbverläufe haben eine lange vordigitale Geschichte in Druck und Airbrush. Das Vokabular des „Gradienten“ als sanfte Rampe von einer Farbe zur anderen stammt direkt aus der Chromolithografie und der Airbrush-Plakatkunst des späten neunzehnten Jahrhunderts; Bauhaus-Designstudenten übten in den 1920er-Jahren Tonwert-Rampen, lange bevor ein Pixel einen solchen Verlauf auf einen Bildschirm brachte.

Digitale Farbverläufe kamen in zwei benachbarten Momenten zu Beginn der 1990er-Jahre auf. Adobe Photoshop 1.0 (Februar 1990) lieferte von Anfang an ein Verlaufswerkzeug aus, einen „Blend“-Algorithmus, der zwischen Vorder- und Hintergrundfarbfeldern mit linearem und radialem Abfall interpoliert. Adobe PostScript Level 2 (1991) führte Schattierungsmuster als vollwertiges Sprachmerkmal ein; bis dahin hatte PostScript Level 1 keine Möglichkeit, einen Verlauf nativ zu beschreiben, und er musste mit gestreiften Füllungen aus abgestuften Grautönen nachgeahmt werden. PostScript Level 3 (1997) fügte die Mesh-Schattierungen Typ 6 (Coons-Patch) und Typ 7 (Tensorprodukt) hinzu, die in der Zeitschriftenbranche der späten 1990er-Jahre jeden gedruckten Verlauf antrieben. Adobe Illustrators Mesh-Verlaufswerkzeug folgte in Version 8 (1998).

CSS-Verläufe im Web kamen später, als die meisten sich erinnern. WebKits -webkit-gradient() erschien 2008 in Safari 4 und Chrome 1 mit einer eigenen, wortreichen Syntax. Mozillas -moz-linear-gradient() folgte in Firefox 3.6 (Januar 2010) und verwendete die Syntax, die schließlich zum Standard werden sollte. Das präfixlose linear-gradient() und radial-gradient() erreichten im April 2012 die W3C Candidate Recommendation und waren ab etwa 2013 breit einsetzbar. conic-gradient() ist deutlich neuer: Chrome 69 im September 2018 (hinter einem Flag), ohne Flag in Chrome 75 (Juni 2019), Firefox 83 (November 2020). Es ist heute in jedem modernen Browser als Baseline verfügbar.

Skeuomorph, dann flach, dann wieder Verlauf

Farbverläufe wurden zur visuellen Sprache des Webdesigns der späten 1990er- und frühen 2000er-Jahre; die glasigen, abgeschrägten, reflektierenden Web-2.0-Schaltflächen der Apple-Aqua-Oberfläche (2000) waren im Grunde verschachtelte Verläufe mit einem scharfen inneren Glanzlicht über einem weichen Korpus-Übergang. Die Flat-Design-Bewegung verfestigte sich rund um Microsofts Metro (Windows Phone 7, 2010) und Apples iOS 7 (2013) und reagierte auf den verlaufslastigen Skeuomorphismus, indem sie jeden Schatten, jede Abschrägung und jeden Übergang aus der Benutzeroberfläche entfernte. Etwa fünf Jahre lang (2013 bis 2018) waren Farbverläufe unmodern.

Das Pendel schlug ab 2017 kräftig zurück. Stripes animierter mehrfarbiger Mesh-Verlauf auf der Startseite setzte eine Vorlage, die die gesamte SaaS-Branche kopierte. Instagrams Logo-Neugestaltung von 2016 ersetzte eine flache Kamera durch einen gesättigten Pink-Orange-Violett-Verlauf (ein bewusstes Echo der Fotografie-Logos der 1980er-Jahre). Zum Ende des Jahrzehnts waren Verläufe wieder allgegenwärtig, aber mit einem neuen Vokabular: Meshes, weichgezeichnete Blobs, OKLCH-glatt, barrierefreiheitsbewusst. Tailwind CSS 4 (Januar 2025) lieferte eine kuratierte Sammlung von Standard-Verlaufs-Utilities aus, darunter konische Verläufe mit Farbton-Interpolationshinweisen.

CSS-Verlaufssyntax auf einen Blick

Alle drei CSS-Verlaufsfunktionen nehmen eine Liste von Farbstopps und eine Richtung entgegen:

• linear-gradient(angle, colors…): Der Winkel in CSS folgt der Kompasspeilung: 0deg zeigt nach oben (erste Farbe unten), 90deg zeigt nach rechts, 180deg zeigt nach unten (Standard), 270deg zeigt nach links. Beachten Sie, dass dies das Gegenteil des mathematischen Polarwinkels ist. Sie können auch Schlüsselwörter verwenden: to top right berechnet den Winkel so, dass die Verlaufslinie durch die Diagonale verläuft, was bei einem nicht quadratischen Kasten nicht dasselbe ist wie ein 135°-Verlauf.
• radial-gradient(shape size at position, colors…): Farben breiten sich von einem Mittelpunkt nach außen aus. circle oder ellipse; Größenschlüsselwörter closest-side, farthest-corner; die Position ist standardmäßig die Mitte.
• conic-gradient(from angle at position, colors…): Farben drehen sich im Uhrzeigersinn um einen Mittelpunkt, wie ein Farbrad. Nützlich für Tortendiagramme, Sweep-Effekte und den typischen „Donut-Diagramm“-Look. Wiederholende Varianten aller drei (repeating-linear-gradient usw.) kacheln die Farbstopps unendlich.

Harte Stopps (zwei Farbstopps am selben Prozentwert) erzeugen scharfe Bänder statt sanfter Übergänge: linear-gradient(red 0%, red 50%, blue 50%, blue 100%) ist eine Zweifarben-Teilung, kein Verlauf. Nützlich für Streifen, Karten mit Abschnittsfarbe oder Pseudo-Rahmen.

Die OKLCH-Revolution und der schlammig-graue Mittelpunkt

Ein Verlauf von reinem Rot #ff0000 zu reinem Grün #00ff00 in der Standard-sRGB-Interpolation durchläuft um #7f7f00 herum ein entsättigtes, schlammiges Gelbbraun. Das passiert, weil die lineare sRGB-Interpolation am Mittelpunkt sowohl den R- als auch den G-Kanal reduziert, und unsere Augen den Mittelpunkt als deutlich dunkler und weniger gesättigt wahrnehmen als beide Endpunkte. Der klassische Schmerzpunkt des Webdesigns.

CSS Color Module Level 4 fügte wahrnehmungsgleichförmige Farbräume hinzu sowie die Möglichkeit, Verläufe in ihnen zu interpolieren: linear-gradient(in oklch, red, green). OKLCH (und sein Geschwister OKLab), im Dezember 2020 von Björn Ottosson entworfen, trennt Helligkeit, Chroma und Farbton, sodass die Interpolation entlang der Farbtonachse den kurzen Weg um das Farbrad nimmt und die Sättigung durchgehend bewahrt. Derselbe Rot-zu-Grün-Verlauf durchläuft in OKLCH am Mittelpunkt ein lebhaftes Gelb.

Die allgemeine Regel:

• Zwei analoge Farbtöne (Rot zu Orange, Blau zu Violett): sRGB und OKLCH sehen ähnlich aus; meist unproblematisch.
• Zwei Komplementärfarbtöne (Rot zu Grün, Blau zu Orange): sRGB erzeugt schlammiges Grau, OKLCH erzeugt einen lebhaften Farbtonverlauf. OKLCH gewinnt eindeutig.
• Eine Farbe zu Weiß oder Schwarz: sRGB wirkt am Mittelpunkt trüb; OKLCH lässt die wahrgenommene Helligkeit gleichmäßig verlaufen.
• Zwei entsättigte Farben ähnlicher Helligkeit: minimaler Unterschied.

Browser-Unterstützung: interpolation-method für Verläufe erschien in Safari 16.2 (Dezember 2022), Chrome 111 (März 2023) und Firefox 113 (Mai 2023) und ist nun als Baseline weithin verfügbar.

Auflösungsvorgaben: die richtige Pixelzahl wählen

Ein Hintergrundbild, das kleiner als der Bildschirm ist, wird gestreckt und wirkt unscharf; eines, das viel größer ist, verschwendet Dateigröße und Speicher. Gängige Zielwerte im Jahr 2026:

Auflösung	Gängiger Name	Wo
1920×1080	Full HD / 1080p	Häufigste Laptop- und Desktop-Auflösung 2026
2560×1440	QHD / 2K	Verbreitete Gaming- und Creator-Monitore
3440×1440	UWQHD Ultrawide	Gebogene 21:9-Ultrawide-Monitore
3840×2160	4K / UHD	High-End-Desktops und Apple Studio Display
5120×2880	5K	Apple iMac Retina, Studio Display
1080×1920	Smartphone Hochformat	Generische FHD-Android-Basis
1170×2532 / 1290×2796	Modernes iPhone	iPhone-13-16-Familie mit 19,5:9
2048×2732	iPad Pro 12,9 Zoll	4:3-Tablets

Wann Sie dazu greifen würden

• Hintergrundbilder für persönliche Geräte: Desktop, Sperrbildschirm, Startbildschirm, sogar als Hintergrund für das Smartwatch-Zifferblatt.
• Virtuelle Hintergründe für Videokonferenzen. Gleichmäßige Verläufe sind für die automatische Segmentierung von Zoom/Teams/Meet einfacher zu verarbeiten als unruhige Fotos und reduzieren den „Halo“-Artefakt rund um die sprechende Person.
• Social-Media-Header: Twitter/X 1500×500, LinkedIn 1584×396, YouTube-Kanalbanner 2560×1440 (mit Berücksichtigung des sicheren Bereichs), Instagram Stories 1080×1920.
• Markenidentitäts-Verläufe. Stripes lila-blauer Mesh, Instagrams Pink-Orange-Violett, Spotifys Limette-zu-Dunkelgrün, Slacks Lila-Pink, allesamt reale Beispiele für markenprägende Verläufe.
• Hero-Bereiche auf Webseiten: Obwohl CSS-Verläufe meist direkt über background-image angewendet werden, ist ein PNG-Fallback nützlich für E-Mails (die meisten E-Mail-Clients rendern CSS-Verläufe nach wie vor nicht zuverlässig) und für Browser ohne oklch-Interpolation.
• Leerzustände, Lade-Skelette, Dashboard-Karten: UI-Flächen, die von dezentem visuellem Interesse profitieren, ohne abzulenken.
• Druck und Merch. Ein 4K-Hintergrundbild bei 300 DPI deckt ungefähr ein Poster von 12 × 18 Zoll ab.

Barrierefreiheit: Text über Verläufen

Der häufigste praktische Fehler bei Verlaufshintergründen besteht darin, den Kontrast für darüberliegenden Text zu verfehlen. WCAG 2.2 SC 1.4.3 (Mindestkontrast, Stufe AA) verlangt 4,5:1 für Fließtext und 3:1 für großen Text (18 pt normal oder 14 pt fett). WCAG wurde für einfarbige Hintergründe geschrieben; bei einem Verlauf zählt der Kontrastwert an jedem Punkt unter dem Text, und der schlechteste Punkt ist ausschlaggebend.

Praktische Lösungen, wenn Sie Text über einen Verlauf legen: ein halbtransparentes schwarzes oder weißes Overlay unter den Text legen, den Verlauf unter dem Text auf einen schmalen Helligkeitsbereich beschränken oder einen kräftigen Textschatten als Fallback verwenden. Vertikale Verläufe (oben dunkel, unten hell) sind in der Regel textfreundlicher als diagonale: Von links nach rechts fließender Text trifft in jeder Zeile auf konstante Hintergrundhelligkeit; ein 45°-Verlauf unter einem langen Textblock zwingt jede Zeile, den Helligkeitsbereich zu durchlaufen, was einen gleichmäßigen Kontrast erheblich erschwert.

Weitere Fragen

Warum hat mein Verlauf sichtbare Streifen?

Zwei übliche Ursachen. Erstens die JPEG-Komprimierung: Die DCT-basierte Kodierung von JPEG erzeugt sichtbare „Blockbildung“ auf sanften Tonwertrampen, besonders in Bereichen mit geringer Sättigung. Speichern Sie stattdessen als PNG oder verlustfreies WebP. Zweitens die Farbtiefe von 8 Bit pro Kanal: Ein 8-Bit-Verlauf zwischen zwei nahe beieinanderliegenden Farben hat nur wenige unterscheidbare Tonwertstufen, und das Auge kann sie manchmal auflösen. Ein dezentes Rausch-/Dither-Overlay (1 bis 2 % Rauschen) bricht die Streifen auf, indem es natürliche Variation hinzufügt; viele hochwertige Designwerkzeuge tun dies automatisch.

Sollte ich für ein Desktop-Hintergrundbild linear, radial oder konisch verwenden?

Für die meisten Hintergrundbilder sehen linear in leichter Diagonale (etwa 135°) oder radial mit Zentrum außerhalb des Bildschirms am besten aus; sie erzeugen Asymmetrie, ohne abzulenken. Konische Verläufe sind auffällig, wirken aber eher „von einem Designer gestaltet“ als wie ein unaufdringlicher Hintergrund, weshalb sie sich besser für Akzentflächen (Albumcover, Social-Media-Beiträge) eignen als für Hintergrundbilder, auf die Sie acht Stunden am Tag schauen. Mesh-Verläufe (mehrere überlappende radiale Verläufe) sind der modernste Look, erfordern aber entweder eine JS-Bibliothek oder ein generiertes Bild; ein einzelner radialer Verlauf mit zwei Komplementärfarbtönen bei geringer Sättigung ist eine gute Annäherung.

Welche Farbkombinationen sehen am besten aus?

Drei verlässliche Muster: analog (zwei auf dem Farbrad benachbarte Farben, Violett zu Blau, Orange zu Rot) wirkt ruhig und harmonisch; monochromatisch (gleicher Farbton, wechselnde Helligkeit, das klassische Stripe-Blau) wirkt markentypisch und dezent; triadisch plus OKLCH (drei oder vier gleichmäßig verteilte Farben, in einem wahrnehmungsbasierten Raum interpoliert) ergibt den modernen Stripe-/Instagram-Look. Vermeiden Sie zwei reine Komplementärfarben (Rot/Grün, Blau/Orange), sofern Sie nicht ausdrücklich die oklch()-Interpolation verwenden, da sRGB Ihnen einen schlammigen Mittelpunkt beschert.

Werden Daten an einen Server gesendet?

Nein. Der Verlauf wird in Ihrem Browser auf ein <canvas> gerendert, das PNG wird über canvas.toDataURL() exportiert, und der CSS-String wird lokal per JavaScript erzeugt. Nichts über Ihre Farbwahl, Abmessungen oder das resultierende Bild verlässt die Seite.

Verwandte Tools