Generator gradient CSS
Bangun gradient dengan mata dan salin CSS-nya.
Seret handle untuk memindahkan stop, atau klik bar untuk menambah satu. Handle juga bisa digeser dengan tombol panah.
Color stop
- %
- %
- %
Jalan di browser kamu. Apa pun yang kamu ketik tidak dikirim ke mana pun.
- Seret untuk menaruh stop
- Linear, radial, dan conic
- 8 preset siap pakai
Cara membuat gradient CSS
- Pilih preset, atau atur warna tiap stop.
- Seret handle di bar, dan klik bar untuk menambah stop.
- Salin CSS-nya dan tempel ke stylesheet kamu.
Perbandingan jenis gradient
| Jenis | Cara menyebar | Fungsi CSS |
|---|---|---|
| Linear | Sepanjang garis lurus pada suatu sudut | linear-gradient() |
| Radial | Menyebar dari titik tengah | radial-gradient() |
| Conic | Mengelilingi titik tengah, seperti roda warna | conic-gradient() |
Dukungan browser tiap jenis gradient
| Jenis gradient | Butuh minimal |
|---|---|
| Linear dan radial | Semua browser terkini, bahkan sampai IE10 dengan prefix |
| Conic | Chrome 69, Firefox 83, Safari 12.1 |
CSS yang diberikan halaman ini selalu dimulai dengan baris background-color polos dulu, jadi browser yang tidak bisa menggambar gradient tetap menampilkan warna stop pertama, bukan kotak kosong.
Tips untuk gradient yang lebih halus
- Tambahkan stop ketiga di tengah supaya gradient-nya terlihat seperti dua warna berbaur lewat warna ketiga, bukan pudar dua warna yang datar.
- Untuk tepi yang tegas alih-alih berbaur, beri dua stop yang bersebelahan posisi yang sama.
- 0deg mengarah dari bawah ke atas dan 90deg dari kiri ke kanan. Tambahkan 180 ke sudut mana pun untuk membalik arah gradient tanpa mengetik ulang tiap stop.
- Cocokkan bentuk radial dengan kotaknya: lingkaran untuk elemen persegi, elips untuk yang lebar, supaya gradient-nya tidak terlihat melar.
FAQ Generator gradient CSS
Bagaimana cara membuat gradient di CSS?
Atur properti background ke fungsi gradient, seperti background: linear-gradient(90deg, #ff7e5f, #feb47b). Nilai pertama adalah arah, lalu diikuti warna, masing-masing dengan posisi opsional.
Apa bedanya gradient linear, radial, dan conic?
Gradient linear mengubah warna sepanjang garis lurus, gradient radial menyebar dari titik tengah, dan gradient conic berputar mengelilingi titik tengah seperti roda warna atau diagram pie.
Ke arah mana sudutnya menunjuk?
0deg mengarah dari bawah ke atas, 90deg dari kiri ke kanan, 180deg dari atas ke bawah, dan 270deg dari kanan ke kiri. Untuk gradient conic, sudutnya menentukan di mana putaran dimulai.
Bagaimana cara membuat garis tegas antara dua warna?
Beri dua stop yang bersebelahan posisi yang sama, misalnya merah 50% dan biru 50%. Warnanya lalu berganti tepat di titik itu, bukan berbaur.
Apakah gradient CSS jalan di semua browser?
Gradient linear dan radial jalan di semua browser terkini. Gradient conic butuh Chrome 69, Firefox 83, atau Safari 12.1 ke atas. CSS di sini dimulai dengan baris warna solid sebagai fallback.
Bisakah aku menganimasikan gradient CSS?
Kamu bisa menganimasikan background-position atau background-size pada gradient berukuran lebih besar untuk efek bergerak. Menganimasikan warna stop-nya sendiri butuh aturan CSS @property atau skrip kecil, karena browser tidak bisa mentween antara dua nilai gradient penuh dengan sendirinya.
Bisakah gradient dipakai sebagai warna teks?
Bisa. Salin CSS gradient di sini ke background, lalu tambahkan background-clip: text dan color: transparent ke elemen teksnya supaya gradient-nya terlihat lewat huruf-hurufnya, bukan mengisi sebuah kotak.