CSS-Verlaufsgenerator

Über CSS-Verläufe

CSS-Verläufe lassen Sie sanfte Übergänge zwischen zwei oder mehr Farben darstellen, ohne Bilddateien zu verwenden. Sie werden vom Browser erzeugt, was bedeutet, dass sie auf jeder Auflösung perfekt skalieren und keinerlei Gewicht zur Ladezeit Ihrer Seite hinzufügen. Verläufe werden über die Eigenschaft background mit den Funktionen linear-gradient() oder radial-gradient() definiert.

Eine kurze Geschichte der CSS-Verläufe

CSS-Verläufe sind im CSS Image Values and Replaced Content Module Level 3 definiert, gepflegt von der W3C CSS Working Group und unter anderem von Tab Atkins Jr. und Elika J. Etemad editiert. Der First Public Working Draft war der 12. Juli 2011; die Spec erreichte den Status Candidate Recommendation am 17. April 2012 und schloss damit die moderne, präfixfreie Syntax fest, einschließlich der Konvention, dass 0deg nach oben zeigt und to right 90deg entspricht. Reihenfolge der Browser-Auslieferung: WebKit war mit großem Abstand vorne, mit -webkit-gradient() nutzbar in Safari 4 (2009) in einer funktionsaufruflastigen Syntax. Firefox lieferte -moz-linear-gradient() in Firefox 3.6 am 21. Januar 2010; Internet Explorer 10 lieferte 2012 die präfixfreien Formen; die präfixfreie Syntax stabilisierte sich Ende 2013 über alle großen Engines. conic-gradient() wurde später in CSS Images Level 4 spezifiziert, Lea Verou entwarf den Vorschlag 2011, Tab Atkins fügte ihn 2012 in die Spec ein, und die native Auslieferung kam in Chrome 69 (4. September 2018), Safari 12.1 (25. März 2019) und Firefox 83 (17. November 2020). 2026 können Sie background: linear-gradient(...) und background: radial-gradient(...) ohne Präfixe und ohne Fallbacks für jeden unterstützenswerten Browser zuverlässig verwenden.

linear-gradient: Winkel, Seiten und die diagonale Feinheit

Die formale Grammatik lautet linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). Die Winkelkonvention bringt Entwickler häufig ins Stolpern, weil sie sich von der SVG-/Canvas-Konvention unterscheidet. 0deg entspricht to top, die Verlaufslinie zeigt nach oben, also erscheint die letzte Farbe oben. 90deg entspricht to right. 180deg entspricht to bottom (der Standard, wenn keine Richtung angegeben wird). 270deg entspricht to left. 135deg ist die kanonische Diagonale, von oben links nach unten rechts, die häufigste Verlaufsrichtung im modernen Webdesign. Wachsende Winkel rotieren im Uhrzeigersinn ab oben, entgegen der mathematischen Konvention (wo 0 rechts ist und Winkel gegen den Uhrzeigersinn wachsen) und entgegen SVGs <linearGradient>. Eine nützliche Feinheit: to right und 90deg sind nur auf quadratischen Boxen äquivalent. Auf einer nicht-quadratischen Box erzeugt to top right eine Verlaufslinie exakt senkrecht zur Diagonale aus der unteren-linken Ecke, der Verlauf trifft die Ecke also sauber, während 45deg immer wörtlich 45 Grad ist, unabhängig vom Seitenverhältnis. Für die meisten Hero-Hintergründe spielt dieser Unterschied keine Rolle; für präzise ausgerichtete Designs kann er es.

radial-gradient: Formen, Größen und Position

Die Grammatik lautet radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Zwei Formwerte: circle (perfekter Kreis skaliert zur Box) und ellipse (Standard, gestreckt nach dem Seitenverhältnis der Box). Die Größe kann eines von vier Extent-Schlüsselwörtern oder explizite Längen/Prozente sein. closest-side: die Endform berührt die nächste Seite. closest-corner: die Endform geht exakt durch die nächste Ecke. farthest-side: die Endform berührt die fernste Seite. farthest-corner (der Standard): die Endform geht durch die fernste Ecke. Die Klausel at <position> bewegt das Zentrum, at top left, at 30% 70% usw. Der Standard-Mittelpunkt ist at center center. Mit radialen Verläufen erzeugen Sie Spotlight-Effekte, weiches Leuchten, „Vignette"-Hintergründe, deren Ränder zu Schwarz hin abdunkeln, und runde Badge-Hintergründe. Sie sind im Produktionseinsatz 2026 spürbar seltener als lineare Verläufe, die meisten „Gradient"-Hintergründe auf Landingpages sind linear, aber sie sind unverzichtbar für Fälle, die der lineare nicht abdecken kann.

Color Stops, das Herz eines Verlaufs

Ein Color Stop ist ein Farbwert mit optionaler Position entlang der Verlaufslinie. linear-gradient(red, blue) setzt Rot auf 0% und Blau auf 100%, mit einer weichen Interpolation dazwischen. linear-gradient(red 0%, yellow 50%, blue 100%) fügt einen gelben Stop in der Mitte hinzu. Stops mit expliziten Positionen können überall zwischen 0% und 100% platziert werden, und Stops ohne explizite Positionen werden gleichmäßig zwischen ihren Nachbarn mit expliziter Position verteilt. Harte Color Stops, zwei Stops an derselben Position, wie linear-gradient(red 50%, blue 50%), erzeugen einen sofortigen Übergang statt eines weichen Verlaufs. Das ist der Trick hinter jedem CSS-Muster: Streifen, Schachbretter, Punkte, alle aus Verlaufsstapeln mit harten Stops gebaut. Color Interpolation Hints (CSS Images Level 4): das Einfügen eines bloßen Prozentwerts zwischen zwei Stops verschiebt die Position des Interpolationsmittelpunkts. linear-gradient(red, 25%, blue) verschiebt den perzeptuellen Mittelpunkt auf 25% statt der Standard-50%, nützlich, um eine Farbe subtil über die andere zu gewichten. Moderne Farbraum-Interpolation (CSS Color Module 4, Baseline 2023+): linear-gradient(in oklch, red, blue) interpoliert im wahrnehmungsuniformen Farbraum Oklab statt im gamma-kodierten sRGB und erzeugt glattere Übergänge in der Mitte ohne die schlammig-graue „tote Zone", die sRGB-Interpolation zwischen hochchromatischen Komplementärfarben produziert. Der Standard ist immer noch in oklab (oder in srgb in älteren Browsern), für handgebaute Verläufe können Sie das Opt-in nutzen.

Moderne Farbräume, warum oklch-Verläufe besser aussehen

Zwei Jahrzehnte lang interpolierte jeder CSS-Verlauf Farbwerte in sRGB, dem gamma-kodierten Farbraum, mit dem das Web aufwuchs. sRGB-Interpolation hat einen wohlbekannten Fehlermodus: Verläufe zwischen hochchromatischen Komplementärfarben (Rot ↔ Grün, Blau ↔ Gelb, Magenta ↔ Cyan) passieren einen schlammig-grauen Mittelpunkt. Probieren Sie linear-gradient(red, green) in sRGB, und die Mitte ist braun, nicht das leuchtende Olive, das Ihre Augen erwarten. Oklab (Björn Ottosson, Dezember 2020) ist ein wahrnehmungsuniformer Farbraum, speziell entworfen, um genau das zu beheben. OKLCH ist die zylindrische Form von Oklab, die drei Koordinaten sind Lightness (0-100%), Chroma (0+) und Hue (0-360°). Verläufe in OKLCH bleiben über die gesamte Transition perzeptuell glatt, mit gleichmäßig rampender Helligkeit und vorhersehbar durch das Farbrad rotierendem Farbton. Die Spezifikation CSS Color Module 4 fügte <color-interpolation-method> als Parameter für Verlaufsfunktionen hinzu: linear-gradient(in oklch, red, blue). Die Browser-Unterstützung erreichte Mitte bis Ende 2023 Baseline (Safari 16.4 März 2023, Chrome 111 März 2023, Firefox 113 Mai 2023). Für Verläufe in produktiven Designsystemen wird die OKLCH-Option zunehmend die richtige Wahl; dieser Generator gibt derzeit sRGB-Standard-Verläufe aus, und der OKLCH-Toggle steht auf der Roadmap.

Performance, Verläufe sind günstig, aber nicht kostenlos

CSS-Verläufe werden in jedem modernen Browser GPU-beschleunigt, was sie für die meisten Anwendungsfälle deutlich schneller macht als gekachelte Bitmaps, keine HTTP-Anfrage, kein Decode, vektor-auflösungsunabhängig, sofort über CSS-Variablen umfärbbar. Die Kompromisse, die man kennen sollte: die Paint-Kosten skalieren mit den berührten Pixeln und der Verlaufskomplexität; Verläufe gehören zu den teureren Dingen, die ein Browser malen kann, und das Stapeln vieler Verlaufsschichten über einen vollflächigen Hero kann auf älteren GPUs Frames kosten. Das Animieren von Verlaufsfarben löst pro Frame ein vollständiges Repaint aus, deutlich teurer als das Animieren von transform oder opacity. Der moderne Fix ist die Verwendung registrierter custom properties via @property (Houdini Properties and Values API), wodurch der Browser Farbwerte auf dem Compositor-Thread statt dem Main-Thread interpolieren kann; unterstützt in Chrome 78+ (Nov 2019), Safari 16.4+ (März 2023), Firefox 128+ (Juli 2024). Die günstigere traditionelle Alternative ist, background-position auf einem fixen Verlauf zu animieren, eine echte Nur-Compositor-Animation, die überall mit 60fps läuft. Die allgemeine Performance-Heuristik: hat Ihre Seite einen einzigen statischen Verlauf, werden Sie nie etwas merken; stapeln Sie fünf animierte Verlaufsschichten auf jeder Karte einer langen Liste, profilen Sie vor dem Ausliefern.

Wo Verläufe ihren Platz verdienen

• Hero-Section-Hintergründe. Weiche Marken-Farb-Verläufe hinter dem Seitentitel, oft mit subtilen radialen Overlays für atmosphärische Tiefe. Stripe, Linear und die meisten modernen SaaS-Landingpages setzen darauf.
• Button-Styling. Subtile Verläufe auf primären CTA-Buttons fügen taktile Tiefe hinzu, die flache Volltonfarben nicht haben. Ergänzen Sie einen leicht dunkleren Hover-State-Verlauf, und der Button fühlt sich lebendig an.
• Bild-Overlays für Textlesbarkeit. Ein vertikaler linear-gradient, oben transparent in unten dunkel verlaufend, auf ein Hero-Bild gelegt mit weißem Text im dunklen Bereich, macht den Text lesbar, unabhängig davon, wie das Foto aussieht.
• Karten-Hintergründe. Subtile Verläufe auf Karten-Hintergründen fügen Tiefe ohne schwere Box-Shadows hinzu.
• Lade-Skelette und Fortschrittsindikatoren. Das klassische Shimmer-Skelett ist ein linearer Verlauf mit halbtransparentem Weiß, das über einen grauen Hintergrund wandert, animiert via background-position.
• Glassmorphism und modernes UI-Styling. Der Mattglas-Effekt, populär gemacht durch macOS Big Sur und iOS, ein halbtransparenter Hintergrund mit backdrop-filter blur, oft mit einem subtilen Verlauf für den Highlight-Effekt überlagert.
• Mesh-Gradient-Imitate. Echte CSS-Mesh-Verläufe sind noch nicht Standard (CSS Images Level 5 wird sie irgendwann ergänzen), aber das Stapeln von 3-5 großen radialen Verläufen mit halbtransparenten Farben erzeugt heute einen überzeugenden Mesh-Gradient-Effekt.

Ehrlicher Geltungsbereich: was dieser Generator tut und was nicht

Dieses Tool erzeugt lineare und radiale CSS-Verläufe mit Live-Vorschau, konfigurierbarem Winkel (für linear) oder Position (für radial) und einer beliebigen Anzahl von Color Stops mit Positionen. Es gibt die moderne, präfixfreie Syntax aus. Was dieses Tool nicht tut, was elaboriertere Generatoren leisten: konische Verläufe (die um-ein-Zentrum-rotierende Variante, für Tortendiagramme, Sonnenstrahlen und Farbkreise), siehe den CSS Pattern Generator von Absolutool für einige Beispiele konischer Muster; wiederholende Verläufe (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) für Streifen und musterartige Füllungen, ebenfalls im CSS Pattern Generator gehandhabt; OKLCH-/Oklab-Interpolationstoggle (der moderne wahrnehmungsuniforme Farbraum), gibt derzeit sRGB-Standard aus; Color-Hint-Syntax zur Verschiebung des Mittelpunkts zwischen Stops; Multi-Stop-Animationskeyframes. Für die meisten produktiven Verläufe (Hero-Hintergründe, Button-Styles, Overlay-Effekte) decken linear + radial den Anwendungsfall ab; für die exotischeren Fälle ist der CSS Pattern Generator das passende Ergänzungswerkzeug.

Häufige Fragen

Werden CSS-Verläufe in allen Browsern unterstützt?

Ja. CSS-Verläufe werden seit 2013 in allen großen Browsern unterstützt und haben weltweit über 98 % Browser-Unterstützung. Vendor-Präfixe wie -webkit- sind für die moderne Nutzung nicht mehr nötig.

Welchen Winkel soll ich für einen diagonalen Verlauf verwenden?

135 Grad erzeugen eine Diagonale von oben links nach unten rechts, was am häufigsten ist. 45 Grad verlaufen von unten links nach oben rechts. 90 Grad verlaufen von links nach rechts und 180 Grad von oben nach unten.

Kann ich mehr als zwei Farben verwenden?

Absolut. Klicken Sie auf „Stopp hinzufügen", um bis zu 8 Farbstopps zu ergänzen. Sie können jede Farbe und ihre Position entlang des Verlaufs steuern. Mehrstufige Verläufe erzeugen reichere und dynamischere visuelle Effekte.

Warum gibt es keine Option für konische Verläufe?

Konische Verläufe (die um-ein-Zentrum-rotierende Variante, für Tortendiagramme, Sonnenstrahlen und Farbkreise) sind ein anderes Designproblem als lineare und radiale Verläufe, die Parameter sind Winkel um ein Zentrum statt Positionen entlang einer Linie. Für konische Verlaufsbeispiele und -muster verwenden Sie den CSS Pattern Generator von Absolutool, der die exotischeren Fälle (konisch, repeating-linear, repeating-conic) für musterartige Füllungen abdeckt. Dieser Generator konzentriert sich auf die linear+radial-Fälle, die den Großteil der Hero- und Button-Verläufe in der Produktion ausmachen.

Sind CSS-Verläufe schneller als Bildhintergründe?

In den meisten Fällen ja, ein CSS-Verlauf eliminiert eine HTTP-Anfrage, einen Decode-Schritt und das Ausliefern mehrerer Auflösungen für Retina-Displays. Der Verlauf ist außerdem auf jedem Zoom vektor-perfekt und über CSS-Variablen trivial umfärbbar. Kompromisse: Verläufe werden auf der GPU gemalt, aber die Paint-Kosten skalieren mit der Pixelfläche und der Stop-Komplexität; das Stapeln vieler Verlaufsschichten über einen vollflächigen Hero kann auf älteren GPUs Frames kosten. Für Animation animieren Sie background-position (nur Compositor, günstig) statt die Color Stops des Verlaufs (vollständiger Repaint, teuer). Einzelne statische Verläufe auf Karten oder Hero-Sections, nie spürbar.

Werden meine Daten irgendwohin gesendet?

Nein. Die Generierung läuft vollständig in Ihrem Browser, Farbpicker, Winkel-Slider und CSS-Code-Generierung laufen alle lokal. Es gibt keine ausgehenden Anfragen, während Sie die Steuerelemente verwenden. Das generierte CSS gehört Ihnen, fügen Sie es ein, wo Sie wollen.

Verwandte Tools