Pembuat Gradien CSS

Buat gradien linear, radial, dan konik dengan pemberhentian warna yang bisa diseret, mode blend, dan CSS siap pakai.

Preset

Pilih titik awal yang sudah dipoles.

Lapisan

Tumpuk gradien untuk kedalaman.

Pengaturan lapisan

Sesuaikan geometri dan blending.

Jenis gradien

Sudut135°

Interpolasi

Mode blend

Titik warna

Klik untuk menambah, seret untuk memindahkan.

Warna titik

Posisi

%

Warna titik

Posisi

%

Warna titik

Posisi

%

Output CSS

Salin CSS yang sesuai dengan pratinjau.

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

Ekspor atau tempel konfigurasi.

{
  "version": 1,
  "layers": [
    {
      "id": "layer-121",
      "type": "linear",
      "angle": 135,
      "centerX": 50,
      "centerY": 50,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "normal",
      "stops": [
        {
          "id": "stop-122",
          "color": "#0B1020FF",
          "position": 0
        },
        {
          "id": "stop-123",
          "color": "#2563EBFF",
          "position": 42
        },
        {
          "id": "stop-124",
          "color": "#22D3EEFF",
          "position": 100
        }
      ]
    },
    {
      "id": "layer-125",
      "type": "radial",
      "angle": 0,
      "centerX": 22,
      "centerY": 18,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "screen",
      "stops": [
        {
          "id": "stop-126",
          "color": "#A855F7CC",
          "position": 0
        },
        {
          "id": "stop-127",
          "color": "#A855F700",
          "position": 62
        },
        {
          "id": "stop-128",
          "color": "#00000000",
          "position": 100
        }
      ]
    }
  ]
}

Apa itu gradien CSS?

Buat gradien linear, radial, dan konik dengan pemberhentian warna yang bisa diseret, mode blend, dan CSS siap pakai.

Gradien CSS adalah gambar yang dihasilkan browser dari transisi warna yang halus. Karena dihitung saat render, ia dapat diskalakan ke ukuran apa pun tanpa pecah dan tidak memerlukan file gambar.

Ada tiga jenis: linear (arah atau sudut), radial (lingkaran atau elips dari pusat), dan konik (sapuan mengitari pusat). Setiap gradien ditentukan oleh titik henti warna; setiap titik dapat memiliki posisi dan alfa untuk mengatur perpaduan.

Beberapa gradien bisa ditumpuk dengan memisahkannya menggunakan koma di background-image dan digabung dengan background-blend-mode untuk tekstur yang lebih kaya. CSS juga mendukung interpolasi pada ruang warna seperti oklch untuk transisi yang lebih mulus.

Gradien linear cocok untuk pencahayaan dan kedalaman terarah.
Gradien radial dan konik berguna untuk spotlight, cincin, dan roda warna.
Atur posisi titik henti untuk transisi yang lebih tajam atau lebih lembut.