Generator gradien CSS
Bentuk gradien secara visual, lalu salin CSS yang berfungsi di semua browser modern.
Tersegel di perangkat ini
Berjalan di browser Anda. Tidak ada yang diunggah.
Tersegel
Pratinjau
Titik warna
Seret titik-titiknya, atau pilih salah satu dan gunakan tombol panah. Klik bilah untuk menambah titik.
Pengaturan
OKLCH dan OKLab menghindari area abu-abu kusam di tengah beberapa gradien. Versi standar disertakan untuk browser lama.
Kode CSS
Cara kerjanya
-
Pilih jenis
Pilih gradien linear, radial, atau conic, atau mulai dari preset, lalu atur sudut atau titik pusatnya.
-
Edit warnanya
Seret titik warna di sepanjang bilah, klik bilah untuk menambah titik, dan ubah warna serta posisi setiap titik.
-
Salin CSS-nya
Salin kode yang dihasilkan dan tempelkan ke stylesheet Anda sebagai background.
Pertanyaan umum
Apa bedanya gradien linear, radial, dan conic?
Gradien linear berubah warna di sepanjang garis lurus dengan sudut pilihan Anda. Gradien radial menyebar dari titik pusat dalam bentuk lingkaran atau elips. Gradien conic berputar mengelilingi titik pusat, seperti jarum jam, yang praktis untuk roda warna dan diagram lingkaran.
Apakah CSS yang dihasilkan berfungsi di semua browser?
Gradien linear, radial, dan conic berfungsi di semua browser saat ini. Jika Anda memilih pencampuran OKLCH atau OKLab, kodenya juga menyertakan baris standar lebih dulu, jadi browser lama tetap menampilkan gradien.
Mengapa gradien saya terlihat abu-abu di tengah?
Mencampur dua warna yang sangat berbeda di ruang sRGB standar sering melewati abu-abu yang kusam. Ubah pencampuran ke OKLCH atau OKLab: warna dicampur sesuai cara mata melihatnya, jadi bagian tengahnya tetap cerah.
Bisakah saya memakai warna transparan?
Bisa. Ketik warna dengan transparansi, seperti rgb(52 66 217 / 0.4) atau #3442d966, di kolom warna sebuah titik. Sangat cocok untuk lapisan di atas gambar.
Berapa banyak titik warna yang bisa saya tambahkan?
Sebanyak yang Anda perlukan. Setiap titik bisa dipindahkan dengan mouse, sentuhan, atau tombol panah, dan bisa dihapus selama masih tersisa dua titik.