Design linear, radial, and conic gradients with live preview and copy-ready CSS.
background: -webkit- linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Generated CSS follows W3C CSS Images Module Level 3 specifications. Browser compatibility may vary. WebKit prefix is included for Safari support. Test across browsers.
A CSS gradient is not an image — it is a function the browser evaluates for every pixel it paints. A linear-gradient first draws an invisible gradient line through the element at your chosen angle, places your color stops (a color + a 0–100% position) along it, then interpolates each pixel's color between the two nearest stops. radial-gradient runs that same interpolation outward from a center point (circle or ellipse), while conic-gradient sweeps it around the center in a full rotation. Two stops are the minimum; more stops let you build banded or multi-color effects, and the browser keeps each adjacent pair of stops fully opaque and smoothly blended.
Left: a 135° linear gradient whose line runs from the top-left stop (#667eea at 0%) to the bottom-right stop (#764ba2 at 100%); each intermediate pixel is a weighted mix of the two. Right: the same stop concept wrapped radially (circle/ellipse) and conically (around the center).
Leo, a front-end dev, is handed a design mock with a diagonal purple-to-blue hero background but only a screenshot — no code. He opens this generator to recreate the exact feel and ship it as copy-ready CSS.
Build CSS gradients visually with live preview. Everything runs locally; nothing is uploaded.
FreeToolHub CSS Gradient Generator is a free browser-based tool — build CSS gradients visually with live preview. No signup, no upload; everything runs locally in your browser.
Erstellen Sie CSS-Gradienten visuell mit Live-Vorschau. Lineare, radiale und konische Typen. Ziehen Sie Farbstopps an, passen Sie Winkel an. Standard- + WebKit-Code.
Dieser Generator erstellt CSS-Gradienten visuell: Wählen Sie linearen, radialen oder konischen Typ, ziehen Sie Farbstopps entlang der Leiste, passen Sie Winkel und Position an und beobachten Sie, wie sich die Vorschau live aktualisiert. Das Tool gibt produktionsfertigen Code aus, einschließlich der Standard-Eigenschaft und dem -webkit-Fallback für ältere Safari-Versionen, mit Syntax für wiederholte Varianten, wenn Muster das Ziel sind. Mehrstufen-Gradienten mit Zwischenpunkten, transparenten Farbstopps und winkelgenauen linearen Richtungen konfigurieren Sie über direkte Manipulation — der schnellste Weg vom gedachten Hintergrund zum ausgelieferten CSS.
Frontend-Entwickler erstellen Prototypen für Hero-Hintergründe, Buttons und Trennlinien, ohne Gradientensyntax manuell zu schreiben und blind Zahlen anzupassen. Designer geben Entwicklern genaue Spezifikationen — Stopps, Winkel, Hex-Werte — anstelle von Annäherungssprache wie "mach es wärmer". Landingpage-Ersteller folgen Brand-Paletten zu Gradientensystemen für Karten und Callouts. Jeder, der ältere Code-Basen pflegt, schätzt die generierte -webkit-prefixierte Ausgabe, wo sie noch benötigt wird. Die Live-Vorschau entfernt den Bearbeiten-Speichern-Aktualisieren-Zyklus vollständig.
(1) Wählen Sie den Gradiententyp: linear für Richtungsüberblendungen, radial für von einem Punkt ausgehendes Licht, konisch für Schwenkeffekte und tortenähnliche Visualisierungen. (2) Fügen Sie Farbstopps durch Klicken auf die Leiste hinzu; ziehen Sie zur Positionierung, klicken Sie zum Bearbeiten von Farbe und Alpha, ziehen Sie Zwischenpunkt-Griffe, um die Überblendung zu beeinflussen. (3) Bei linearen Gradienten setzen Sie den Winkel in Grad; bei radialen und konischen Gradienten setzen Sie die Mittelposition. (4) Kopieren Sie den generierten CSS-Code — Standard und WebKit-prefixiert — direkt in Ihr Stylesheet; ein Wiederholungs-Schalter verwandelt jede Konfiguration in ihre wiederholte Variante.
Die drei Typen beantworten drei visuelle Fragen. Lineare Gradienten überblenden entlang einer Linie und übernehmen die Hauptaufgaben: Hero- und Hintergrundbereiche, Buttons, Textunterstreichungen, Fortschrittsbalken und Trennlinien — subtile Zweistufen-Dunkel-zu-dunkler-Überblendungen bei 135 oder 180 Grad wirken wie Licht, das über eine Oberfläche fällt. Radiale Gradienten überblenden von einem Punkt nach außen und simulieren Lichtquellen: Spotlight-Effekte, Vignetten, sanftes Glühen hinter Icons und das klassische dezente Glühen des Seitenhintergrunds, das die Aufmerksamkeit im Zentrum verankert. Konische Gradienten schwingen um einen Kreis und bauen rotatorische Strukturen auf: Tortendiagramme, Farbräder, Lade-Spinner, radarartige Fortschrittsringe und winklige Badge-Effekte — alles, bei dem Position Richtung und nicht Entfernung bedeutet. Zwei Handwerksregeln tragen die meiste Qualität: Halten Sie Stopps in Helligkeit nah beieinander für Hintergründe (ein Helligkeitsunterschied von 5–10 Prozent reicht), da große Sprünge sichtbar bandig wirken, und bevorzugen Sie Gradienten gegenüber halbtransparenten Überlagerungen, um foto-lastige Hero-Bereiche abzudunkeln — eine Überlagerung flacht das Bild ab, ein dunkler Gradient bewahrt die Tiefe.
Ein Gradient ist nur so gut wie seine Stoppliste, und drei Gewohnheiten trennen polierte Überblendungen von schlammigen. Erstens: Ordnen Sie Stopps nach Helligkeit sowie Position — eine Dunkel-zu-Licht-Abfolge fühlt sich gerichtet und beabsichtigt an, während abwechselnde Helligkeit als Banding wirkt. Zweitens: Zwei Stopps reichen meistens — jeder zusätzliche Stopp halbiert Ihre Kontrolle über die Überblendung, fügen Sie also Zwischenpunkte nur hinzu, um eine bestimmte flache oder harte Stelle zu korrigieren. Drittens: Halten Sie den Farbhub zwischen Nachbarn unter etwa 90 Grad, es sei denn, Sie wollen absichtlich einen Regenbogeneffekt — Lila-zu-Blau bleibt reich, während Lila-zu-Gelb durch ein Grau geht, das niemand haben wollte. Laden Sie eine Vorlage, tauschen Sie ihre beiden Hex-Werte gegen Ihre Markenfarben aus und passen Sie Positionen an, bevor Sie etwas hinzufügen. Speichern Sie das Ergebnis in Ihrem Browser und kopieren Sie das CSS — die Ausgabe ist reines CSS ohne Abhängigkeiten.
Lineare und radiale Gradienten funktionieren in jedem Browser dieses Jahrzehnts. Konische Gradienten werden in allen Evergreen-Browsern (Chrome, Edge, Firefox, Safari) seit 2020-2021 unterstützt — sicher für den allgemeinen Einsatz, für Legacy-E-Mail-Clients und Webviews wird eine solide Fallback-Farbe empfohlen.
Lineare Gradienten überblenden entlang einer Achse — geeignet für Banner, Buttons und Überlagerungen. Konische Gradienten überblenden um einen Kreis — geeignet für Tortendiagramme, Lade-Ringe und winklige Farbverläufe. Wenn das Design sich wie "von hier dahin" liest, verwenden Sie linear; wenn es sich wie "im Kreis" liest, verwenden Sie konisch.
Gradienten werden einmal gezeichnet und wie jedes Hintergrundbild zwischengespeichert, sodass statische Gradienten im Wesentlichen kostenlos sind. Das Animieren von Gradientenpositionen erzwingt Neuzeichnungen — wenn Sie Bewegung benötigen, animieren Sie eine Transformation auf einer übergroßen Gradientenebene anstelle des Gradienten selbst, um auf der GPU zu bleiben.
Überblenden Sie Farbtöne, die mit ihren Nachbarn harmonieren: benachbarte Stopps funktionieren am besten innerhalb von etwa 90 Grad Farbabstand oder bei ähnlicher Helligkeit benachbarter Farbtöne. Platzieren Sie Stopps am visuellen Zwischenpunkt anstelle des arithmetischen, um die Überblendung gleichmäßig zu halten — die Vorlagenpaletten sind vorausbalancierte Ausgangspunkte.
Es unterstützt linear-gradient (mit Winkelsteuerung von 0° bis 360°), radial-gradient (Kreis/Ellipse mit Positionsteuerung) und conic-gradient (mit Startwinkel). Fügen Sie unbegrenzte Farbstopps mit präziser Prozentpositionierung hinzu. Die Live-Vorschau aktualisiert sich, während Sie ziehen, und die Ausgabe ist produktionsfertiger CSS-Code mit Vendor-Präfixen, falls benötigt.
Ja. Kopieren Sie den CSS-Eigenschaftswert, eine vollständige Klassendefinition oder einen Tailwind CSS-Arbitrary-Wert. Es erzeugt auch das äquivalente SVG-Markup für die Verwendung in Design-Tools. Beliebte Vorlagen (Aurora, Sonnenuntergang, mesh-artiger Mehrfachgradient) sind als Ausgangspunkte enthalten, jeweils mit 3-5 Farbstopps vorkonfiguriert.
It supports linear-gradient (with angle control from 0° to 360°), radial-gradient (circle/ellipse with position control), and conic-gradient (with starting angle). Add unlimited color stops with precise percentage positioning. The live preview updates as you drag, and output is production-ready CSS with vendor prefixes if needed.
Yes. Copy the CSS property value, a full class definition, or a Tailwind CSS arbitrary value. It also generates the equivalent SVG markup for use in design tools. Popular presets (aurora, sunset, mesh-style multi-gradient) are included as starting points, each with 3-5 color stops pre-configured.
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.