Buat gradient CSS

Buat gradient linear, radial, atau conic dari hingga delapan titik warna, salin kode CSS beserta cadangan sRGB, lalu ekspor sebagai PNG atau SVG.

Cara Salin CSS

1
Pilih warna dan posisi titik
Mulai dari dua titik warna dan tambahkan hingga delapan. Setiap titik menerima nilai warna dan posisi dalam persen yang diketik langsung, jadi Anda bisa memasukkan angka yang tepat alih-alih menggeser pegangan dengan mouse.
2
Pilih linear, radial, atau conic
Atur sudut untuk gradient linear atau conic, bentuk dan titik tengah untuk gradient radial, serta apakah seluruh pola diulang. Pratinjau langsung diperbarui.
3
Salin CSS atau unduh PNG
CSS diberikan sebagai dua deklarasi: cadangan (fallback) sRGB, lalu versi modern dengan ruang interpolasi yang diterapkan di atasnya. Gradient yang sama juga bisa diekspor sebagai PNG dengan ukuran berapa pun hingga 4096 piksel, atau sebagai SVG.

Mengapa interpolasi di OKLCH

Gradient dari biru ke kuning di sRGB biasa melewati abu-abu kusam di tengahnya. Itu bukan kesalahan browser Anda: merata-ratakan kanal merah, hijau, dan biru satu per satu menghapus kroma tepat di tempat mata mengharapkan hijau yang bersih. OKLCH adalah ruang warna perseptual, jadi dua titik ujung yang sama menghasilkan titik tengah yang tetap jenuh dan gradasi yang kecerahannya naik merata. CSS modern memungkinkan Anda menentukan ruang interpolasi, seperti `linear-gradient(90deg in oklch, ...)`, dan alat ini memakainya secara bawaan. Ruang oklab, sRGB, dan HSL juga tersedia bila Anda menginginkan tampilan lama.

Mengapa cadangan lebih penting daripada kelihatannya

Browser yang tidak memahami `in oklch` tidak hanya mengabaikan kata itu; browser membuang seluruh deklarasi. Tanpa cadangan, hasilnya bukan gradient yang sedikit berbeda, melainkan tidak ada gradient sama sekali, dan warna latar belakang apa pun di bawahnya akan terlihat. Karena itu, CSS yang disalin selalu berisi dua baris `background-image`. Baris pertama adalah cadangan: enam belas titik antara yang dihitung di sini dalam ruang warna pilihan Anda dan ditulis sebagai hex sRGB biasa. Hasilnya mendekati kurva yang sama cukup rapat sehingga kebanyakan orang tidak bisa membedakannya. Baris kedua adalah versi modern satu baris, yang diterapkan di atasnya oleh setiap browser yang mendukungnya.

Gradient berulang dan kasus khusus conic

Gradient berulang menyusun urutan titik warna berkali-kali, dan itu hanya berfungsi jika titik terakhir berada di bawah 100%. Jika tidak, tidak ada sisa ruang yang bisa diulang, dan hasilnya tampak sama persis dengan versi biasa. Kasus itu terdeteksi sebelum Anda menyalin apa pun. Gradient conic punya keterbatasan sendiri saat diekspor: SVG 1.1 sama sekali tidak punya elemen gradient conic, jadi tombol SVG melaporkan hal itu dan mengarahkan Anda ke PNG. PNG tersebut digambar sebagai 720 irisan setengah derajat agar kompatibel dengan Safari versi lama.

Semuanya dihitung di tab ini

Interpolasi warna, teks CSS, markup SVG, dan PNG semuanya dibuat secara lokal dengan JavaScript dan canvas. Tidak ada apa pun tentang gradient Anda yang diunggah, dan tidak ada gambar yang dikirim ke mana pun untuk diolah. Tutup tab, dan tidak ada yang tertinggal.

Pertanyaan yang sering diajukan

Mengapa interpolasi gradient dilakukan di OKLCH?

Karena interpolasi sRGB membuat bagian tengah gradient di antara rona yang berjauhan menjadi pudar, sehingga muncul pita abu-abu. OKLCH seragam secara perseptual, jadi titik tengahnya mempertahankan kroma dan kenaikan kecerahannya tampak merata.

Mengapa saya perlu baris cadangan?

Browser yang tidak mendukung sintaks `in <space>` membuang seluruh deklarasi, bukan hanya bagian yang tidak dikenalnya. Cadangan adalah pendekatan sRGB biasa yang ditulis lebih dulu, sehingga browser seperti itu tetap mendapat gradient.

Bagaimana cara membuat gradient berulang?

Aktifkan opsi berulang dan geser titik terakhir ke bawah 100%, misalnya ke 20%. Urutan titik warna kemudian diulang di sepanjang elemen. Jika titik terakhir berada di 100%, tidak ada yang bisa diulang, dan Anda akan diberi tahu, bukan diam-diam mendapat hasil yang sama.

Mengapa tidak ada SVG untuk gradient conic?

SVG 1.1 hanya mendefinisikan gradient linear dan radial; tidak ada elemen conic. Meniru gradient conic dengan ratusan irisan akan menghasilkan file yang tidak bisa diedit siapa pun, jadi ekspor SVG ditolak untuk conic dan PNG ditawarkan sebagai gantinya.

Bisakah saya membuat gradient yang memudar menjadi transparan?

Bisa. Gunakan notasi warna yang membawa kanal alfa, seperti hex delapan digit atau rgba(), untuk titik yang ingin dipudarkan. CSS maupun PNG sama-sama mempertahankan transparansinya.

Berapa ukuran yang tepat untuk mengunduh latar belakang?

Untuk latar belakang layar penuh, lebar 1920 piksel biasanya sudah lebih dari cukup, dan gradient bisa dikompres dengan sangat baik. Ukuran di atas 2048 hanya sepadan untuk cetak. Jika dipakai di web, utamakan CSS: ukurannya hanya beberapa ratus byte dan bisa diskalakan ke ukuran berapa pun.

Apakah Safari mendukung gradient ini?

Safari 16.4 ke atas memahami ruang interpolasi. Versi yang lebih lama memakai baris cadangan sRGB, dan justru karena itu baris tersebut disertakan. Gradient conic di CSS didukung sejak Safari 12.1, dan ekspor PNG menggambarnya sebagai irisan sehingga versi yang lebih lama pun menampilkannya dengan benar.