CSS-Gradient-Generator: Tool für lineare, radiale und konische Verläufe

Erstelle CSS-lineare, radiale und konische Verläufe visuell. Ziehe Farbpunkte, passe Winkel an und kopiere produktionsreifen CSS-Code.

100% clientseitig. Deine Daten verlassen niemals deinen Browser.

background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
Winkel
deg
Farbstopps
0%
100%
Voreinstellungen
Senden an:

Verwandte Werkzeuge

%20
URL-Kodierer und HTML-Entitäten-Kodierer

Kodiere Text für URLs mit encodeURIComponent oder encodeURI und maskiere HTML-Sonderzeichen als benannte oder numerische Entitäten. Alles im Browser.

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