Generator Gradien CSS

Rancang gradien latar belakang secara visual dan salin CSS yang siap pakai. Geser titik warna di sepanjang bilah, klik bilah untuk menambah titik, ubah sudut atau pusat, dan buat warna transparan. Kodenya menyertakan warna solid cadangan untuk browser lama.

°
%
%
Titik warna Geser titik untuk memindahkannya; klik bilah untuk menambah titik.
%
%
Preset

Cara memakainya


  1. Pilih linear, radial, atau konik, atau mulai dari preset atau gradien acak.
  2. Klik sebuah titik untuk mengubah warna, opasitas, dan posisinya; geser titik, atau klik bilah untuk menambah titik lain.
  3. Salin CSS dan tempel ke dalam aturan elemen.

Pertanyaan yang sering diajukan


Apa perbedaan gradien linear, radial, dan konik?
Gradien linear mengubah warna sepanjang garis lurus pada sudut yang Anda pilih. Gradien radial menyebar dari pusat berbentuk lingkaran atau elips. Gradien konik berputar mengelilingi pusat, seperti jarum jam, berguna untuk roda warna dan diagram lingkaran.

Apakah gradien CSS berfungsi di semua browser?
Ya. Gradien linear, radial, dan konik berfungsi di semua versi terbaru Chrome, Edge, Firefox, dan Safari tanpa prefiks. Baris background pertama berupa warna polos, yang hanya dipakai browser yang sangat lama.

Bagaimana cara membuat garis-garis?
Letakkan dua titik dengan warna sama di awal dan akhir setiap garis agar warna berubah mendadak, bukan berbaur, lalu aktifkan Ulangi. Preset terakhir adalah contohnya.

🏷️ Generator Meta Tag
🖼️ Generator Open Graph
🔗 Pembuat Tautan UTM
🔲 Generator CSS Box Shadow