Generator Gradientów CSS

Twórz gradienty liniowe, radialne i stożkowe z przeciąganymi punktami kolorów, trybami mieszania i gotowym CSS.

Presetty

Wybierz dopracowany punkt startowy.

Warstwy

Nakładaj gradienty dla głębi.

Ustawienia warstwy

Dopasuj geometrię i mieszanie.

Typ gradientu

Kąt135°

Interpolacja

Tryb mieszania

Przystanki kolorów

Kliknij, aby dodać przystanek. Przeciągnij, aby przesunąć.

Kolor przystanku

Pozycja

%

Kolor przystanku

Pozycja

%

Kolor przystanku

Pozycja

%

Wyjście CSS

Skopiuj CSS zgodny z podglądem.

Format koloru

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;

JSON konfiguracji

Eksportuj lub wklej konfigurację.

{
  "version": 1,
  "layers": [
    {
      "id": "layer-233",
      "type": "linear",
      "angle": 135,
      "centerX": 50,
      "centerY": 50,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "normal",
      "stops": [
        {
          "id": "stop-234",
          "color": "#0B1020FF",
          "position": 0
        },
        {
          "id": "stop-235",
          "color": "#2563EBFF",
          "position": 42
        },
        {
          "id": "stop-236",
          "color": "#22D3EEFF",
          "position": 100
        }
      ]
    },
    {
      "id": "layer-237",
      "type": "radial",
      "angle": 0,
      "centerX": 22,
      "centerY": 18,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "screen",
      "stops": [
        {
          "id": "stop-238",
          "color": "#A855F7CC",
          "position": 0
        },
        {
          "id": "stop-239",
          "color": "#A855F700",
          "position": 62
        },
        {
          "id": "stop-240",
          "color": "#00000000",
          "position": 100
        }
      ]
    }
  ]
}

Czym jest gradient CSS?

Twórz gradienty liniowe, radialne i stożkowe z przeciąganymi punktami kolorów, trybami mieszania i gotowym CSS.

Gradient CSS to obraz generowany przez przeglądarkę z płynnego przejścia między kolorami. Ponieważ jest obliczany podczas renderowania, skaluje się do dowolnego rozmiaru bez pikselizacji i nie wymaga plików graficznych.

Są trzy typy: liniowy (kierunek lub kąt), radialny (okrąg lub elipsa z centrum) i stożkowy (obrót wokół centrum). Każdy gradient jest zdefiniowany przez przystanki kolorów; każdy przystanek może zawierać pozycję i alfa, aby kontrolować mieszanie.

Wiele gradientów można nakładać, oddzielając je przecinkami w background-image, i łączyć za pomocą background-blend-mode, aby uzyskać bogatsze tekstury. CSS obsługuje też interpolację w przestrzeniach barw, takich jak oklch, dla gładszych przejść.

Gradienty liniowe świetnie nadają się do światła i kierunkowej głębi.
Gradienty radialne i stożkowe są przydatne do reflektorów, pierścieni i kół barw.
Przesuwaj pozycje przystanków, aby wyostrzyć lub zmiękczyć przejścia.