CSS-Verlaufsgenerator
CSS Gradient Builder
Baut lineare, radiale und konische Verläufe mit verschiebbaren Stopps und gibt das CSS aus, in sRGB oder OKLCH.
Baut einen linearen, radialen oder konischen Verlauf und gibt das CSS aus, einschließlich der `in oklch`-Interpolationsklausel, die entscheidet, was zwischen den Stopps passiert. Dieselben Stopps werden darunter immer ein zweites Mal in sRGB gezeichnet, denn das Argument für die Interpolation in einem wahrnehmungsbezogenen Raum ist ein visuelles, und vier Zentimeter Verlauf machen es schneller als ein Absatz.
Dieselben Stopps in sRGB, zum Vergleich. Wenn die Mitte dieses Streifens neben dem darüber ausgewaschen wirkt, tut der Interpolationsraum genau seine Arbeit: Eine Gerade durch den sRGB-Würfel zwischen zwei gegenüberliegenden Farbtönen führt nah an der Neutralachse vorbei.
Läuft um das Farbrad herum, sodass die Mitte ihr Chroma behält. Die Voreinstellung — und der Grund, warum CSS diese Syntax bekommen hat.
Stopps
- 0%
- 100%
Vorlagen
CSS
background-image: linear-gradient(135deg in oklch, #5b6cff 0%, #22d3ee 100%);Die Klausel in oklch braucht einen Browser von 2023 oder neuer. Ältere Engines verwerfen die ganze Deklaration, statt auf etwas anderes zurückzufallen — stellen Sie ihr also einen einfachen sRGB-Verlauf in einer vorangehenden Deklaration zur Seite, wenn Sie sie unterstützen.
So funktioniert es
Wählen Sie den Typ, dann den Winkel
Linear verläuft in einer geraden Linie, radial breitet sich von einem Punkt aus, konisch dreht sich um einen. Der Winkel gilt für linear und konisch; radial nimmt stattdessen eine Form und ein Zentrum.
Platzieren Sie die Stopps
Jeder Stopp hat eine Farbe und eine Position von 0 bis 100 %. Zwei sind das Minimum; einen hinzuzufügen verteilt die Positionen gleichmäßig neu, danach können Sie sie verschieben. Die Vorgaben sind ein schneller Weg zu sehen, wie sich drei oder vier Stopps verhalten.
Wählen Sie den Interpolationsraum – das ist die eigentliche Entscheidung
OKLCH hält das Chroma durch die Mitte, und das ist es, was Blau-nach-Gelb davon abhält, auf halbem Weg grau zu werden. OKLab nimmt den kürzesten wahrnehmungsbezogenen Pfad und ist richtig, wenn die beiden Stopps im Farbton nahe beieinander liegen. sRGB ist das alte Verhalten, und bewusst zu wählen, wenn alte Browser dasselbe Ergebnis bekommen sollen wie neue.
In einem polaren Raum entscheiden Sie, in welche Richtung um den Kreis
OKLCH, LCH und HSL sind polar, es gibt also zwei Bögen zwischen zwei beliebigen Farbtönen. `shorter` ist die Voreinstellung und gewöhnlich das, was Sie wollen; `longer` macht aus einem Zwei-Stopp-Verlauf einen Regenbogen, was gelegentlich genau der Effekt ist.
Kopieren Sie den Wert oder die ganze Deklaration
Der Wert geht in ein bestehendes `background-image`; die Deklaration ist bereit, für sich allein eingefügt zu werden.
Häufige Fragen
Funktioniert `in oklch` in jedem Browser?
Nein. Es braucht eine Engine von 2023 oder später, und eine ältere verwirft die gesamte Deklaration, statt auf sRGB zurückzufallen – teilweise Unterstützung gibt es hier nicht. Setzen Sie einen einfachen sRGB-Verlauf in eine vorangehende Deklaration und lassen Sie die neuere Engine ihn überschreiben; das ist der Standard-Fallback der CSS-Kaskade und kostet eine zusätzliche Zeile.
Warum wird der sRGB-Streifen in der Mitte grau?
Weil die Interpolation in sRGB eine gerade Linie durch den Farbwürfel zieht, und die Linie zwischen zwei ungefähr gegenüberliegenden Farbtönen nahe an der neutralen Achse vorbeiläuft. Am Verlauf ist nichts falsch – er tut genau, was die Zahlen sagen, und die Zahlen handelten nie davon, wie Farbe aussieht.
Mein Verlauf hat sichtbare Streifen. Kann das hier behoben werden?
Nicht direkt. Banding ist die 8-Bit-Ausgabe, die eine langsame Rampe über eine große Fläche quantisiert, und keine Wahl des Interpolationsraums beseitigt es. Die üblichen Antworten sind eine schwache Rauschüberlagerung, eine dezente sich wiederholende Textur, oder den Verlauf eine kürzere Strecke laufen zu lassen. Dieses Werkzeug gibt nur CSS aus und dithert nicht.
Kann ich ihn als Bild exportieren?
Nein. Die Ausgabe ist ein CSS-Wert, der kleiner ist als jedes Bild davon, auflösungsunabhängig und animierbar. Wenn Sie eine Rasterdatei brauchen – für eine E-Mail-Vorlage etwa, wo CSS-Verläufe unzuverlässig sind –, machen Sie einen Screenshot der Vorschau oder bauen Sie ihn im Mustergenerator, der auf einen Canvas zeichnet.
Eingabe aus
Box-Shadow-Generator
Box Shadow Generator
Setzt mehrschichtige Box- und Textschatten mit Live-Vorschau zusammen und gibt das CSS aus.
Hintergrundmuster-Generator
Background Pattern Generator
Erzeugt kachelbare SVG-Muster – Streifen, Punkte, Raster, Rauschen – mit Farb- und Größensteuerung.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
Palettengenerator
Palette Generator
Baut aus einer Grundfarbe eine harmonische Palette nach Komplementär-, Triaden- und Analogregeln.
Hintergrundmuster-Generator
Background Pattern Generator
Erzeugt kachelbare SVG-Muster – Streifen, Punkte, Raster, Rauschen – mit Farb- und Größensteuerung.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.