Generator gradien CSS
Rancang gradien linear, radial atau conic, lihat perubahannya secara langsung, dan salin aturan CSS background-nya.
Berjalan sepenuhnya di browser Anda
Titik warna
Preset
Warna titik bisa berupa warna apa pun yang dipahami browser Anda (HEX, nama, rgb(), hsl(), oklch()). Hingga 10 titik. Posisi dalam persen; hasilnya CSS biasa tanpa vendor prefix.
Cara membuat gradien CSS
- Pilih Linear, Radial atau Conic, atau mulai dari preset.
- Atur sudut atau posisi, lalu edit titik warnanya: ubah warna dan posisi masing-masing, tambahkan titik, dan pindahkan ke atas atau ke bawah.
- Tekan Salin CSS dan tempel aturannya ke stylesheet Anda. Centang opsi fallback jika Anda ingin baris warna solid sebelumnya.
Memahami gradien CSS
Generator gradien CSS ini membuat gambar yang digambar sendiri oleh browser, jadi gradien bisa diskalakan ke ukuran apa pun dan tidak perlu diunduh. Gradien linear memadukan warna di sepanjang garis yang arahnya ditentukan oleh sudut. Gradien radial memadukan warna ke arah luar dari titik pusat dalam bentuk lingkaran atau elips. Gradien conic menyapukan warna mengelilingi titik pusat seperti jarum jam, sehingga menjadi pilihan alami untuk diagram lingkaran dan roda warna.
Setiap titik warna (color stop) adalah sebuah warna ditambah posisi di sepanjang garis gradien, ditulis dalam persen. Di antara dua titik, browser memadukan warna dengan halus. Jika dua titik berbagi posisi yang sama, perpaduannya tidak punya lebar dan Anda mendapat tepi yang tegas. Jika sebuah titik ditempatkan lebih awal dari titik sebelumnya, browser menganggapnya berada di posisi titik sebelumnya, itulah sebabnya alat ini memungkinkan Anda menyusun ulang dan mengurutkan titik.
Aturannya ditulis sebagai background: agar bisa dipakai di elemen apa pun. Gradien digambar di latar belakang, jadi teks di atasnya butuh perhatian kontras yang sama seperti teks di atas warna polos: periksa bagian paling terang dan paling gelap dari perpaduannya secara terpisah.
Tips
- Pilih warna titik yang serasi dengan Generator palet warna.
- Konversi sebuah titik antara HEX, RGB dan HSL di Konverter warna dan kontras.
- Mau merilis stylesheet-nya? Perkecil dengan Minify dan rapikan CSS.
Pertanyaan umum
Apa arti sudut pada gradien linear?
0deg mengarah ke atas, jadi gradien berjalan dari tepi bawah ke atas. 90deg berjalan dari kiri ke kanan, 180deg dari atas ke bawah, dan 270deg dari kanan ke kiri. 360deg sama arahnya dengan 0deg. Alat ini menulis angka yang Anda masukkan dengan satuan deg.
Bagaimana cara mendapat tepi tegas, bukan perpaduan halus?
Beri dua titik yang bersebelahan posisi yang sama. Misalnya, merah di 50% lalu biru di 50% berganti warna tepat di tengah tanpa perpaduan. Preset Garis tegas menunjukkan hal ini.
Apa fungsi opsi berulang?
Opsi ini menulis repeating-linear-gradient, repeating-radial-gradient atau repeating-conic-gradient. Pola antara titik pertama dan terakhir Anda diulang, jadi baru terlihat jika titik terakhir berada sebelum 100%. Coba titik di 0%, 10% dan 20% untuk mendapat garis-garis.
Untuk apa baris fallback warna solid?
Browser yang tidak bisa membaca gradien akan mengabaikan baris itu dan memakai baris sebelumnya. Browser yang mendukung gradien, yaitu hampir semua yang dipakai saat ini, akan menimpanya. Warna fallback-nya adalah warna titik pertama Anda.
Format warna apa saja yang diterima?
Apa pun yang diterima properti CSS color di browser Anda: #1636a3, tomato, rgb(22 54 163), hsl(226 76% 36%) atau oklch(0.5 0.2 260). Mengetik yang lain akan menampilkan pesan dan membiarkan gradien valid terakhir tetap di layar.
Apakah gradien conic butuh posisi?
Gradien conic selalu punya titik pusat, dan alat ini menulisnya dalam persen, jadi 50% 50% adalah tengah kotak. Sudut awal memutar titik mulai sapuan warna, diukur searah jarum jam dari atas.