Penjana Gradien CSS

Cipta gradien linear, radial dan kon dengan hentian warna boleh diseret, mod campuran dan CSS sedia guna.

Pratetap

Pilih titik mula yang kemas.

Lapisan

Susun beberapa gradien untuk kedalaman.

Tetapan lapisan

Laraskan geometri dan campuran.

Jenis gradien

Sudut135°

Interpolasi

Mod campuran

Hentian warna

Klik untuk tambah, seret untuk alih.

Warna hentian

Kedudukan

%

Warna hentian

Kedudukan

%

Warna hentian

Kedudukan

%

Output CSS

Salin CSS yang sepadan dengan pratonton.

Format warna

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 konfigurasi

Eksport atau tampal konfigurasi.

{
  "version": 1,
  "layers": [
    {
      "id": "layer-185",
      "type": "linear",
      "angle": 135,
      "centerX": 50,
      "centerY": 50,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "normal",
      "stops": [
        {
          "id": "stop-186",
          "color": "#0B1020FF",
          "position": 0
        },
        {
          "id": "stop-187",
          "color": "#2563EBFF",
          "position": 42
        },
        {
          "id": "stop-188",
          "color": "#22D3EEFF",
          "position": 100
        }
      ]
    },
    {
      "id": "layer-189",
      "type": "radial",
      "angle": 0,
      "centerX": 22,
      "centerY": 18,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "screen",
      "stops": [
        {
          "id": "stop-190",
          "color": "#A855F7CC",
          "position": 0
        },
        {
          "id": "stop-191",
          "color": "#A855F700",
          "position": 62
        },
        {
          "id": "stop-192",
          "color": "#00000000",
          "position": 100
        }
      ]
    }
  ]
}

Apa itu gradien CSS?

Cipta gradien linear, radial dan kon dengan hentian warna boleh diseret, mod campuran dan CSS sedia guna.

Gradien CSS ialah imej yang dijana oleh pelayar daripada peralihan warna yang lembut. Kerana ia dikira semasa render, ia boleh diskalakan ke sebarang saiz tanpa piksel dan tidak memerlukan fail imej.

Terdapat tiga jenis: linear (arah atau sudut), radial (bulatan atau elips dari pusat), dan konik (sapuan mengelilingi pusat). Setiap gradien ditentukan oleh hentian warna; setiap hentian boleh menyertakan kedudukan dan alfa untuk mengawal campuran.

Berbilang gradien boleh disusun dengan memisahkannya menggunakan koma dalam background-image dan digabungkan dengan background-blend-mode untuk tekstur yang lebih kaya. CSS juga menyokong interpolasi dalam ruang warna seperti oklch untuk peralihan yang lebih licin.

Gradien linear sesuai untuk pencahayaan dan kedalaman berarah.
Gradien radial dan konik berguna untuk spotlight, cincin, dan roda warna.
Laraskan kedudukan hentian untuk peralihan yang lebih tajam atau lebih lembut.