CSS-Gradient-Generator

Erstellen Sie lineare, radiale und konische Verläufe mit ziehbaren Farbstopps, Mischmodi und einsatzbereitem CSS.

Presets

Wählen Sie einen hochwertigen Ausgangspunkt.

Ebenen

Stapeln Sie mehrere Verläufe für mehr Tiefe.

Ebeneneinstellungen

Geometrie und Mischmodus anpassen.

Verlaufsart

Winkel135°

Interpolation

Mischmodus

Farbstopps

Klicken zum Hinzufügen, ziehen zum Verschieben.

Stoppfarbe

Position

%

Stoppfarbe

Position

%

Stoppfarbe

Position

%

CSS-Ausgabe

CSS passend zur Vorschau kopieren.

Farbformat

background-image: linear-gradient(135deg in oklch, #0B1020 0%, #2563EB 42%, #22D3EE 100%), radial-gradient(circle farthest-corner at 22% 18% in oklch, #A855F7CC 0%, #A855F700 62%, #00000000 100%);
background-blend-mode: normal, screen;

Konfig-JSON

Exportieren oder einfügen, um ein Setup zu laden.

{
  "version": 1,
  "layers": [
    {
      "id": "layer-41",
      "type": "linear",
      "angle": 135,
      "centerX": 50,
      "centerY": 50,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "normal",
      "stops": [
        {
          "id": "stop-42",
          "color": "#0B1020FF",
          "position": 0
        },
        {
          "id": "stop-43",
          "color": "#2563EBFF",
          "position": 42
        },
        {
          "id": "stop-44",
          "color": "#22D3EEFF",
          "position": 100
        }
      ]
    },
    {
      "id": "layer-45",
      "type": "radial",
      "angle": 0,
      "centerX": 22,
      "centerY": 18,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "screen",
      "stops": [
        {
          "id": "stop-46",
          "color": "#A855F7CC",
          "position": 0
        },
        {
          "id": "stop-47",
          "color": "#A855F700",
          "position": 62
        },
        {
          "id": "stop-48",
          "color": "#00000000",
          "position": 100
        }
      ]
    }
  ]
}

Was ist ein CSS-Verlauf?

Erstellen Sie lineare, radiale und konische Verläufe mit ziehbaren Farbstopps, Mischmodi und einsatzbereitem CSS.

Ein CSS-Verlauf ist ein vom Browser erzeugtes Bild, das aus einem weichen Übergang zwischen Farben besteht. Da er zur Renderzeit berechnet wird, skaliert er ohne Pixelbildung in jede Größe und benötigt keine Bilddateien.

Es gibt drei Typen: linear (Richtung oder Winkel), radial (Kreis oder Ellipse von einem Zentrum) und konisch (eine Drehung um ein Zentrum). Jeder Verlauf wird durch Farbstopps definiert; jeder Stopp kann eine Position und Alpha enthalten, um das Mischen zu steuern.

Mehrere Verläufe lassen sich in background-image durch Kommas stapeln und mit background-blend-mode kombinieren, um reichere Texturen zu erzeugen. CSS unterstützt außerdem unterschiedliche Interpolationsfarbräume wie oklch für gleichmäßigere Übergänge.

Lineare Verläufe eignen sich gut für Licht und gerichtete Tiefe.
Radiale und konische Verläufe sind nützlich für Spotlights, Ringe und Farbräder.
Passe Stopp-Positionen an, um Übergänge härter oder weicher zu machen.