Apa yang dilakukan alat ini
Gradien CSS adalah latar yang berubah perlahan dari satu warna ke warna lain, ditulis sebagai teks, bukan gambar. Alat ini membiarkan Anda menyusunnya sambil melihat hasilnya: pilih linear, radial, atau kerucut, letakkan titik warna pada bilah, dan CSS muncul di bawahnya, siap disalin. Gradien yang sama bisa disimpan sebagai PNG hingga 4096 piksel per sisi, berguna untuk gambar media sosial, wallpaper, atau mockup. Tidak ada yang diunggah: gradien digambar di browser Anda.
Linear, radial, dan kerucut
Gradien linear berjalan sepanjang garis. Sudut diukur searah jarum jam dari atas: 0deg menunjuk ke atas, 90deg ke kanan, 180deg ke bawah. Nilai awal di sini 135deg, dari pojok kiri atas ke kanan bawah. Anda juga bisa memakai kata seperti to right. Pojok bukan sudut tetap: pada persegi to top right setara 45deg, tetapi pada kotak 200 kali 100 piksel browser mengubahnya menjadi sekitar 26,57deg agar dua pojok yang bukan tujuan mendapat warna tengah yang tepat.
Gradien radial menyebar dari pusat. Bentuknya lingkaran atau elips, dan ukuran menentukan di mana titik terakhir jatuh: sisi atau pojok terdekat atau terjauh. Tanpa ukuran, CSS memakai elips yang mencapai pojok terjauh.
Gradien kerucut menyapu di sekitar pusat seperti jarum jam. Posisi diukur pada satu putaran penuh, jadi 25% adalah seperempat putaran. Ini cara umum menggambar diagram lingkaran atau roda warna hanya dengan CSS.
Titik warna, tepi tegas, dan pengulangan
Tiap titik punya warna dan posisi, dari 0% sampai 100%. Dua titik di posisi yang sama membuat tepi tegas, bukan campuran, begitulah garis-garis dibuat. Contoh Garis-garis adalah repeating-linear-gradient(45deg, #fde68a 0%, #fde68a 10%, #f59e0b 10%, #f59e0b 20%): satu pita kuning dan satu oranye yang berjumlah 20% dari garis. Pada kotak 100 kali 100 piksel garisnya sepanjang 141,42 piksel, sehingga pola berulang tiap 28,28 piksel.
Jika titik tidak berurutan, browser menaikkan titik yang lebih awal ke posisi titik sebelumnya. Alat ini menghindari kejutan itu dengan selalu menulis titik terurut menurut posisi.
Opasitas adalah bagian dari tiap titik. Browser mencampur warna dengan alfa yang sudah dikalikan, jadi peralihan dari merah ke transparan penuh tetap merah dan hanya makin pudar: di tengah adalah merah dengan opasitas 50%, bukan merah gelap yang kusam. PNG mengikuti aturan yang sama. Warna padat ditulis #rrggbb; dengan transparansi Anda bisa memilih hex delapan digit seperti #ff000080 atau rgba(255, 0, 0, 0.5), keduanya berarti sama.
Awalan, PNG, dan hal yang perlu diketahui
Browser saat ini memahami linear-gradient() dan radial-gradient() tanpa awalan sejak lebih dari satu dekade lalu, jadi kode ini tidak butuh versi -webkit-. conic-gradient() lebih baru (Chrome 69, Safari 12.1, Firefox 83) dan didukung semua browser saat ini. PNG digambar pada kanvas dengan titik yang sama, sehingga cocok dengan pratinjau. Untuk bayangan yang serasi dengan gradien, lihat pembuat box shadow; untuk memeriksa keterbacaan teks, pakai alat warna.
