Generator Gradien CSS

Cara menggunakan generator gradien CSS

1. Pilih Jenis gradien: Linear, Radial, atau Kerucut (conic). Pratinjau besar di bagian atas diperbarui setiap kali ada perubahan.
2. Untuk gradien linear, atur Sudut dengan slider atau ketik dalam derajat (90° berjalan dari kiri ke kanan, 180° dari atas ke bawah). Untuk gradien kerucut, sudut menentukan titik awal putaran.
3. Untuk gradien radial dan kerucut, geser titik pusat dengan Pusat X dan Pusat Y. Gradien radial bisa berupa Lingkaran atau Elips (menu Bentuk).
4. Edit Titik warna. Klik di mana saja pada bilah untuk menambah titik di sana dengan warna yang sudah dimiliki gradien di posisi itu, atau gunakan Tambah titik untuk mengisi celah terlebar. Seret penanda untuk memindahkannya. Setiap titik juga memiliki baris tempat Anda bisa memilih warnanya, mengetik warna CSS apa pun, mengatur Posisi (%), atau Buang titik tersebut (gradien selalu memiliki minimal dua titik).
5. Jika mau, centang Berulang, pilih Interpolasi warna, klik Balik untuk membalik urutan titik, atau Gradien acak untuk mencari inspirasi.
6. Salin hasilnya dari Kode CSS dengan tombol Salin.

Keyboard: fokuskan penanda pada bilah, lalu gunakan tombol panah untuk menggesernya 1% (10% dengan Shift), Home dan End untuk melompat ke ujung, dan Delete untuk menghapusnya.

Tiga fungsi gradien

• linear-gradient() memadukan warna di sepanjang garis lurus. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) berjalan dari nila di kiri ke merah muda di kanan. Sudut dihitung searah jarum jam dari atas: 0deg mengarah ke atas, 90deg ke kanan.
• radial-gradient() memancar dari sebuah titik pusat. radial-gradient(circle at 30% 40%, …) menempatkan pusat 30% dari kiri dan 40% dari atas. Elips ikut meregang mengikuti kotak, sedangkan lingkaran tetap bulat.
• conic-gradient() berputar mengelilingi pusat seperti jarum jam. conic-gradient(from 0deg at 50% 50%, …) bisa dipakai untuk roda warna, diagram lingkaran, dan efek spinner. Posisi titik adalah bagian dari satu putaran penuh.

Opsi Berulang memakai repeating-linear-gradient() dan fungsi sejenisnya: pola yang ditentukan oleh titik-titik Anda diulang sampai kotak terisi. Letakkan titik terakhir jauh di bawah 100% (misalnya 20%) untuk melihat garis-garis atau cincin.

Dua titik pada posisi yang sama menghasilkan tepi tegas, bukan paduan warna; begitulah garis-garis dan bendera dibuat. Generator ini menjaga titik tetap terurut berdasarkan posisi di dalam kode, sesuai persyaratan CSS.

Interpolasi sRGB atau OKLCH

Secara bawaan, browser memadukan warna gradien dalam sRGB. Di antara dua warna yang jenuh, seperti biru dan kuning, hal ini sering menghasilkan bagian tengah yang kusam atau keabu-abuan. CSS Color Level 4 memungkinkan Anda memilih ruang interpolasi: linear-gradient(90deg in oklch, …) memadukan warna di ruang perseptual OKLCH dan menjaga bagian tengah tetap cerah.

Dengan OKLCH (lebih halus, dengan cadangan sRGB), alat ini menulis dua deklarasi background: pertama versi sRGB klasik, lalu versi OKLCH. Browser yang mendukung ruang interpolasi (Chrome dan Edge 111+, Safari 16.2+, Firefox 127+) memakai baris kedua; browser lama mengabaikannya dan tetap memakai baris pertama.

Tips

• Warna dengan transparansi bisa dimasukkan di kolom titik warna, misalnya #00000080 atau rgb(0 0 0 / 50%), berguna untuk lapisan di atas gambar.
• Kode ditulis dengan background. Gunakan background-image jika Anda mengatur properti latar belakang lainnya secara terpisah.
• Gradien yang halus (dua gradasi berdekatan dari satu warna) biasanya terlihat lebih profesional daripada paduan warna pelangi.