CSS-Gradient-Generator: Lineare, radiale Verläufe

CSS-Gradient-Generator

CSS-Verläufe ermöglichen sanfte Farbübergänge ohne Bilddateien. Der Browser rendert sie als Hintergrund mit den Funktionen linear-gradient(), radial-gradient() und conic-gradient(). Dieses Tool generiert das CSS visuell, sodass du das Ergebnis sehen kannst, während du Farben, Winkel und Positionen der Farbpunkte anpasst.

Verwendung

1. Wähle einen Verlaufstyp. Linear für gerichtete Mischungen, radial für kreisförmige Verschmelzungen, konisch für winkelförmige Überstreichungen
2. Füge Farbpunkte hinzu und passe sie an. Klicke auf den Farbwähler, um eine Farbe auszuwählen, ziehe den Schieberegler, um ihre Position im Verlauf festzulegen
3. Passe die Richtung an. Verwende das Winkelquadranten- oder die Pfeiltasten für lineare Verläufe. Für radiale und konische Verläufe passe die Mittelpunktposition mit den X/Y-Schiebereglern an
4. Teste eine Voreinstellung zur Inspiration. Klicke auf eine Vorschauminiatur, um deren Farben und Einstellungen als Ausgangspunkt zu laden
5. Kopiere das CSS. Klicke auf Kopieren oder drücke Cmd+C, um die background-Eigenschaft in deine Zwischenablage zu kopieren

Wie CSS-Verläufe funktionieren

Ein CSS-Verlauf ist technisch gesehen ein Bild, keine Farbe. Die Kurzschreibweise background akzeptiert ihn, weil background-image Teil der Kurzschreibweise ist. Das bedeutet, du kannst mehrere Verläufe, durch Kommas getrennt, auf demselben Element übereinanderlegen und Verläufe überall dort verwenden, wo Bilder akzeptiert werden: border-image, list-style-image, sogar mask-image.

Der Browser berechnet den Verlauf, indem er eine Verlaufslinie (linear), einen Verlaufsradius (radial) oder einen Verlaufsbogen (konisch) erstellt. Die Farbpunkte definieren die Farben an bestimmten Positionen entlang dieser Linie. Zwischen Punkten interpoliert der Browser standardmäßig im sRGB-Farbraum. CSS Color Level 4 führt die Interpolation in oklab und in oklch für visuell gleichmäßigere Mischungen ein, die Browserunterstützung wird jedoch noch implementiert.

Tipps

• Verwende deckungsgleiche Farbpunkte (zwei Punkte an derselben Position) für harte Kanten
• Füge einen dritten Farbpunkt in der Mitte hinzu, um einen Vintage-Film-Look zu erzielen
• Lege mehrere lineare Verläufe übereinander, um komplexe Texturen zu erzeugen