Schatten-Generator
Mehrere Schatten auf einer Karte stapeln und CSS kopieren.
Design
CSS-Verlauf-Generator
Lineare, radiale und konische Verläufe bauen und CSS kopieren.
Was es macht. Ein Verlaufsgenerator baut CSS-Farbverläufe mit Live-Vorschau. Neben linear, radial und konisch lässt sich der Farbraum wählen, in dem interpoliert wird — der entscheidende Punkt, wenn ein Verlauf in der Mitte grau werden soll oder nicht.
Läuft im BrowserKein UploadKeine AnmeldungFunktioniert offline
So benutzt du CSS-Verlauf-Generator
- Wähl die Verlaufsart und setz die Farbstopps.
- Stell Winkel oder Mittelpunkt ein und wähl bei Bedarf den Interpolationsfarbraum.
- Kopier das fertige CSS.
Die drei Arten
Sie unterscheiden sich darin, wie der Verlauf geometrisch verläuft.
| Art | Verlauf | Typischer Einsatz |
|---|---|---|
| linear-gradient | entlang einer Achse | Hintergründe, Schaltflächen, Abdunklung über Bildern |
| radial-gradient | von einem Punkt nach außen | Lichteffekte, weiche Vignetten |
| conic-gradient | um einen Punkt herum | Tortendiagramme, Farbkreise, Ladeanzeigen |
Ein konischer Verlauf ist der einfachste Weg zu einem Tortendiagramm ohne Bibliothek: harte Farbstopps an den passenden Prozentwerten, fertig. Für Fortschrittsringe wird er mit einer Maske kombiniert.
Warum ein Verlauf in der Mitte schmutzig wird
Weil standardmäßig in sRGB interpoliert wird, und der Weg zwischen zwei gesättigten Farben führt dort durch einen unbunten Bereich.
Der klassische Fall ist Blau nach Gelb: In der Mitte entsteht ein trübes Grau statt eines lebendigen Grüns. Bei Rot nach Grün dasselbe.
Die Lösung ist ein anderer Interpolationsfarbraum. in oklch oder in lch führt den Verlauf über die gesättigte Route und hält die Farbigkeit über die gesamte Strecke.
Wo ältere Browser unterstützt werden müssen, hilft ein Zwischenstopp von Hand: eine dritte Farbe in der Mitte, die den Verlauf dorthin zwingt, wo er hin soll. Das ist die Technik, mit der Verläufe vor der Farbraumunterstützung gebaut wurden.
Verläufe und der Dunkelmodus
Ein Verlauf, der auf Weiß gut aussieht, wirkt auf Dunkel oft grell oder schmutzig.
Der zuverlässigste Weg ist, die Farbstopps über Custom Properties zu definieren und diese je Farbschema neu zu setzen. Der Verlauf selbst bleibt dann derselbe, nur die Farben wechseln.
Faustregel für den Dunkelmodus: Sättigung senken und Helligkeit deutlich reduzieren. Eine Markenfarbe, die auf Weiß strahlt, überstrahlt auf Schwarz — dasselbe Phänomen, das dünne helle Schrift auf dunklem Grund unruhig wirken lässt.
Zur Leistung: Verläufe sind günstig, solange sie statisch sind. Teuer wird es, wenn ein Verlauf animiert wird, denn dann muss er in jedem Bild neu gezeichnet werden. Für animierte Verläufe verschiebt man besser einen größeren, statischen Verlauf mit background-position.
Häufige Fragen
Warum wird mein Verlauf in der Mitte grau?
Weil in sRGB interpoliert wird. Mit „in oklch" bleibt der Verlauf über die ganze Strecke farbig.
Wie mache ich ein Tortendiagramm?
Mit conic-gradient und harten Farbstopps an den passenden Prozentwerten.
Wie viele Farbstopps sind sinnvoll?
Zwei bis drei. Mehr wirkt selten besser und macht Anpassungen aufwendig.
Funktionieren Verläufe im Dunkelmodus?
Wenn die Farbstopps über Variablen definiert sind, ja. Sättigung und Helligkeit dort deutlich zurücknehmen.
Kosten Verläufe Leistung?
Statische kaum. Animierte schon — dort besser einen größeren Verlauf verschieben.
Wird etwas hochgeladen?
Nein, alles entsteht in diesem Tab.
Ratgeber zu CSS-Verlauf-Generator
- HEX vs RGB vs HSL: Which to Use When7 min read
- CSS Gradients, Shadows and Palettes7 min read