CSS-Gradient-Generator Online
CSS-Verläufe mit Live-Vorschau erstellen. Keine Installation, kostenlos.
background: linear-gradient(135deg, #667eea, #764ba2);
Warum dieses Tool nutzen
Perfekte CSS-Verläufe in Sekunden
Live-Vorschau
Sieh das Ergebnis, während du Farben, Winkel und Positionen anpasst.
Produktionsreifer Code
Moderne CSS-Syntax. Keine überflüssigen Vendor-Präfixe.
Browserkompatibel
Überprüfe die Kompatibilität und erhalte den richtigen Code für deine Zielbrowser.
Keine Installation nötig
Alles im Browser. Kein Figma, Sketch oder Plugins erforderlich.
So funktioniert es
Drei Schritte, kein Aufwand
Verlaufstyp wählen
Wähle zwischen linear-gradient, radial-gradient oder conic-gradient. Jeder Typ hat seine eigenen spezifischen Steuerelemente.
Farben und Positionen konfigurieren
Füge beliebig viele Farbstopps hinzu. Passe Winkel, Mittelpunkt und Prozentsatz für jede Farbe über visuelle Steuerelemente an.
CSS-Code kopieren
Der CSS-Code wird in Echtzeit generiert. Kopiere die vollständige background-Eigenschaft, bereit zum Einfügen in dein Stylesheet.
FAQ
Noch Fragen?
Ein linearer Verlauf (linear-gradient) wechselt zwischen Farben entlang einer geraden Linie in einem definierten Winkel. Ein radialer Verlauf (radial-gradient) strahlt von einem Mittelpunkt nach außen in einer kreisförmigen oder elliptischen Form ab. Ein konischer Verlauf (conic-gradient) wechselt um einen Mittelpunkt herum wie Uhrzeigerhände – ideal für Tortendiagramme oder rotierende Farbeffekte in reinem CSS.
Verwende rgba() oder das Schlüsselwort transparent als Farbstopp. Beispielsweise erzeugt linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)) einen Verlauf von festem Rot zu vollständig transparentem Rot. Vermeide die direkte Verwendung von transparent in Verläufen über dunklen Hintergründen, da Browser durch Schwarz (rgba(0,0,0,0)) interpolieren und ein unerwünschtes gräuliches Artefakt erzeugen.
Lineare und radiale Verläufe werden seit 2012 in allen modernen Browsern unterstützt (Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+). Konische Verläufe sind neuerer Natur: unterstützt ab Chrome 69 (2018), Firefox 83 (2020) und Safari 12.1 (2019). Für Projekte, die IE11-Unterstützung benötigen, haben CSS-Verläufe keinen nativen Fallback – verwende stattdessen SVG-Bilder.
Füge mehrere Farbstopps hinzu: linear-gradient(45deg, #ff0000 0%, #ff7700 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). Steuere die genaue Position jeder Farbe mit Prozentwerten oder absoluten Werten (px, em). Wenn du keine Positionen angibst, werden die Farben gleichmäßig verteilt.
CSS-Verläufe werden von der GPU des Browsers generiert und benötigen keine Netzwerkanfrage, was sie deutlich effizienter als Bilder macht. Sehr komplexe CSS-Verläufe mit vielen Farbstopps können jedoch die Seitendarstellung beeinträchtigen. Für animierte Verläufe kann die Performance auf schwachen Mobilgeräten abnehmen – ziehe in diesem Fall transform oder opacity in Betracht, die als GPU-beschleunigte Eigenschaften kein Reflow verursachen.
CSS-Verläufe: Standardisierungsgeschichte der W3C und fortgeschrittene Techniken
CSS-Verläufe haben eine komplexe Standardisierungsgeschichte. Die ersten Implementierungen erschienen als proprietäre Erweiterungen: -webkit-gradient() in Safari 4 (2008) mit einer völlig anderen Syntax als die moderne. Mozilla implementierte -moz-linear-gradient() in Firefox 3.6 (2010). Die moderne, weitaus intuitivere Syntax wurde im W3C-CSS-Images-Level-3-Modul eingeführt und erreichte 2011 den Candidate-Recommendation-Status sowie nicht-präfixierte Unterstützung in Chrome 26 und Firefox 16 im Jahr 2012. Die Funktion conic-gradient() wurde 2015 von Lea Verou vorgeschlagen und in CSS Images Level 4 standardisiert.
CSS-Verläufe werden vollständig auf der GPU durch die Compositor-Ebene des Browsers gerendert, anders als gerasterte Bilder, die eine vorherige CPU-Dekodierung erfordern. Das macht sie besonders effizient für großflächige Hintergründe. Die Rendering-Engine (Skia in Chrome/Edge, WebRender in Firefox) berechnet die Farbinterpolation standardmäßig im sRGB-Farbraum. CSS Color Level 4 führt die Interpolation in anderen Farbräumen (oklch, display-p3) ein, was wahrnehmungsgleichmäßigere Verläufe ohne unerwünschtes Farbbanding ermöglicht.
Eine fortgeschrittene Technik ist der Gradientenhalbton, der mehrere Hintergrundebenen verwendet, um Punktmuster zu erzeugen. Eine weitere ist die Verwendung von Verläufen als CSS-Masken mit mask-image: linear-gradient(), was Ausblendeffekte an Elementen ohne JavaScript ermöglicht. Für Verlaufstext-Effekte wird background-clip: text mit color: transparent kombiniert – eine seit 2015 populäre Technik im modernen UI-Design, die weit verbreitet in Interfaces von Apple, Google und Meta eingesetzt wird. Verläufe sind auch die Grundlage von Neumorphismus und Glassmorphismus, den dominanten Design-Trends von 2019 bis 2023.