Generator Gradien Acak

Sembilan gradien sekali klik, CSS dan PNG yang bagian tengahnya tidak kusam

Generator Gradien Acak membuat satu gradien utama di panggung besar dan 8 kandidat di sampingnya sekaligus, setiap kali Anda menekan tombol Gradien baru atau tombol Spasi. Mengeklik kandidat akan menukarnya dengan panggung, jadi membandingkan jauh lebih cepat daripada menelusuri satu per satu. Warna yang Anda sukai bisa dikunci dengan gembok, dan bentuknya bisa dipilih di antara linear, radial, kerucut (conic), dan mesh, atau dibiarkan acak.

Hal yang paling diperhatikan generator ini adalah cara mencampur warna. Gradien CSS yang hanya memakai warna HEX mencampur nilai sRGB apa adanya demi kompatibilitas ke belakang. Karena itu, bagian tengah gradien dari biru (#0000FF) ke kuning (#FFFF00) menjadi abu-abu #808080. Alat ini secara bawaan memberi baris CSS yang mencampur dalam OKLCH, dengan baris sRGB di depannya untuk browser lama yang belum mengenal baris tersebut. Hasilnya bisa disalin sebagai CSS, atau disimpan sebagai PNG berukuran wallpaper desktop maupun ponsel.

Kapan dipakai

• Saat menentukan latar hero halaman web atau banner: di bagian Coba pakai, gradien langsung diterapkan pada contoh hero, lalu Anda memeriksa dengan angka kontras apakah teks putih atau hitam yang terbaca.
• Saat butuh gambar latar wallpaper atau slide presentasi: simpan gradien yang Anda sukai sebagai PNG berukuran 1920×1080, 4K, atau vertikal 1080×1920. Ukurannya juga bisa diketik langsung di kolom lebar dan tinggi.
• Saat mencari gradien yang cocok dengan satu warna merek: muat gradien yang memuat warna itu lewat tautan, kunci dengan gembok, lalu pilih aturan warna. Warna lainnya ditentukan dari sudut rona (hue) warna yang dikunci.
• Saat memilih warna untuk tombol atau penekanan teks: teks gradien, tombol berisi, dan kartu berbingkai ditampilkan bersamaan, sehingga kesan pada elemen kecil, bukan hanya latar yang luas, bisa dilihat lebih dulu.

Cara memakai

1. Membuat: tekan tombol Gradien baru atau tombol Spasi. Tombol Spasi hanya berfungsi saat panggung terlihat di layar dan fokus tidak berada di kolom isian atau tombol.
2. Memilih: klik kandidat yang Anda sukai di antara 8 kandidat. Kandidat itu naik ke panggung, dan gradien yang tadinya di panggung turun ke tempatnya.
3. Mengunci: warna yang gemboknya Anda tekan di kolom warna titik akan tetap berada di urutan yang sama pada pembuatan berikutnya. Jika Kunci bentuk dan sudut diaktifkan, bentuk, sudut, pusat, dan posisi titik mesh tetap, hanya warnanya yang berubah.
4. Mengubah pengaturan: mengubah bentuk, aturan warna, jumlah warna, atau nada langsung membuat gradien baru dengan pengaturan itu. Ruang pencampuran dan penggeser sudut tidak mengundi ulang warna, hanya mengubah gradien yang sedang tampil.
5. Membawa hasilnya: Salin CSS menyalin deklarasi background dua baris, dan Salin tautan menyalin alamat yang memuat gradien saat ini. Simpan PNG membuat gambar dalam ukuran yang dipilih lalu mengunduhnya. 20 gradien terbaru hanya tersimpan di browser ini.

Cara warna dan bentuk dipilih

Warna ditentukan dalam OKLCH. OKLCH adalah Oklab, ruang warna yang dibuat Björn Ottosson agar sesuai dengan kecerahan dan perbedaan warna yang dirasakan manusia, yang ditulis ulang sebagai kecerahan (L), saturasi (C), dan sudut rona (H). Pertama, aturan warna menentukan sudut rona tiap titik warna, lalu kecerahan dan saturasi dipilih dari rentang nada. Kecerahan mengalir satu arah dari titik pertama ke titik terakhir (dengan goyangan ±0,03), dan arahnya diundi, sehingga gradien punya sisi terang dan sisi gelap. Jika warna terpilih berada di luar jangkauan tampilan sRGB, kecerahan dan sudut rona dipertahankan dan hanya saturasi yang dikurangi.

Bentuk juga diundi. Untuk linear, sudut dipilih per kelipatan 15°. Untuk radial, pusat dipilih dari 0, 25, 50, 75, dan 100% pada sumbu horizontal dan vertikal. Untuk kerucut, pusat dipilih dari 25, 50, dan 75%, lalu sudut awal ditentukan per kelipatan 15°. Mesh menjadikan warna pertama sebagai dasar dan meletakkan satu titik untuk tiap warna sisanya. Posisi titik per kelipatan 5%, dan jari-jari sebarannya 50–80% dari ukuran kotak. Jika warna yang dikunci berkroma (bukan abu-abu), sudut rona warna itu menjadi acuan aturan.

Mengapa bagian tengah jadi abu-abu, dan cara pencampuran

CSS Color 4 menetapkan bahwa jika ruang pencampuran tidak ditentukan, warna dicampur dalam Oklab. Namun demi kompatibilitas ke belakang, jika hanya notasi sRGB lama seperti HEX, rgb(), dan hsl() yang dipakai, pencampuran dilakukan dalam sRGB berkode gamma. Kode gradien umumnya ditulis dengan HEX, sehingga dalam praktiknya pencampuran sering terjadi dalam sRGB. Saat dua warna komplementer dicampur dalam sRGB, nilai merah, hijau, dan biru di tengah menjadi hampir sama, dan hasilnya abu-abu.

Ketiga cara itu berbeda sifatnya. OKLab menyambung kecerahan secara merata. Kecerahan tengah 0,709 antara biru (L 0,452) dan kuning (L 0,968) hampir sama dengan rata-rata kedua nilai, dan bagian tengahnya tidak menggelap seperti 0,600 pada sRGB. Namun karena garisnya lurus menembus sisi seberang roda warna, saturasinya tetap turun banyak. OKLCH memutar sudut rona lewat sisi yang lebih pendek dan menjaga saturasi, sehingga bagian tengahnya tetap cerah. Sebagai gantinya, warna yang tidak ada di kedua ujung muncul di tengah, seperti sian yang dilewati saat berpindah dari biru ke kuning.

Untuk tiap aturan, 10.000 gradien dua warna diundi (nada Dasar, seed tetap), lalu dihitung proporsi gradien yang bagian paling kusamnya memiliki saturasi di bawah separuh saturasi warna titik. Hasilnya ada di tabel berikut. Pada aturan komplementer dan split komplementer, yang sudut ronanya terpaut 150° atau lebih, bagian tengah sebagian besar kusam baik dalam sRGB maupun OKLab, dan hanya OKLCH yang tidak. Karena itu alat ini menjadikan OKLCH sebagai bawaan, dan pita serta kurva saturasi di bawah Coba pakai membandingkan ketiga cara dengan warna yang sama.

Sintaks CSS dan dukungan browser

CSS yang disalin berbentuk seperti berikut untuk tiap bentuk. Posisi titik warna tidak ditulis, sehingga memakai penempatan merata bawaan CSS.

• Linear: linear-gradient(135deg in oklch, #FFC9A3, #F7849F, #A08AF0). Dalam spesifikasi CSS Images, 0deg menunjuk ke atas dan 90deg ke kanan, dan semakin besar sudutnya semakin jauh putaran searah jarum jam. Panjang garis gradien dari lebar W dan tinggi H kotak adalah abs(W·sinA) + abs(H·cosA).
• Radial: radial-gradient(circle at 25% 75% in oklch, …). Jika ukuran tidak ditulis, ujungnya adalah sudut terjauh dari pusat (farthest-corner).
• Kerucut: conic-gradient(from 45deg at 50% 50% in oklch, A, B, C, A). Sudut awal 0deg menunjuk ke atas dan berputar searah jarum jam. Warna pertama ditulis sekali lagi di akhir agar tidak ada sambungan yang terlihat di titik satu putaran penuh.
• Mesh: warna pertama dijadikan warna dasar, lalu untuk tiap warna sisanya ditumpuk elips yang berakhir pada transparansi 0 dari warna yang sama, seperti radial-gradient(60% 60% at 20% 30%, #warna, #warna00). Warnanya tetap dan hanya transparansinya yang berubah, jadi tidak terpengaruh ruang pencampuran dan in tidak ditulis.
• Titik henti putih, hitam, dan abu-abu: di baris OKLCH ditulis seperti oklch(1 0.002 264.05), dengan saturasi 0,002 yang tidak terlihat dan sudut rona warna tetangganya, dan ditulis dua kali di posisi yang sama bila warna di kedua sisinya punya rona berbeda. Spesifikasi membuat warna akromatik mengikuti rona tetangganya, tetapi dengan saturasi 0 Chrome memperlakukan rona secara berbeda sehingga warna di tengah berubah (dicek pada 2026-10-20).

Browser yang tidak mengenal ruang pencampuran membuang seluruh deklarasi yang memuat in oklch. Karena itu CSS yang disalin menaruh baris yang mencampur dalam sRGB lebih dulu, lalu baris OKLCH atau OKLab sesudahnya. Browser baru memakai baris belakang, browser lama memakai baris depan. Jika urutannya dibalik, baris sRGB akan menang bahkan di browser baru.

Saat menaruh teks di atas gradien

Kriteria Keberhasilan WCAG 2.2 1.4.3 mensyaratkan kontras teks isi terhadap latar minimal 4,5:1, dan teks besar (18 pt, atau 14 pt tebal, ke atas) minimal 3:1. Dokumen penjelasnya tidak punya aturan khusus gradien, dan teknik G18 meminta kita melihat kontras antara teks dan latar di belakangnya. Karena warna latar gradien berbeda di tiap tempat, alat ini membandingkan warna titik henti dan semua warna di sepanjang garis gradien yang dibagi menjadi 1.024 langkah (untuk mesh, kisi 128 kolom dan pusat setiap titik), lalu menampilkan kontras terendah masing-masing untuk teks putih dan teks hitam. Pada gradien linear, radial, dan kerucut, pusatnya berada di dalam kotak sehingga setiap posisi pada garis gradien muncul di suatu tempat di layar; karena itu nilai ini adalah kontras terendah di seluruh layar, berapa pun rasionya. Kontras ditampilkan dengan pembulatan ke bawah pada satu angka desimal dan penilaian memakai nilai itu, jadi 4,48:1 tidak dibulatkan ke atas menjadi 4,5:1 agar lulus.

Angka ini dihitung dari 5.000 gradien tiga warna untuk tiap nada (dicampur dalam OKLCH, seed tetap). Nada Dasar punya rentang kecerahan lebar 0,50–0,90, sehingga di ujung terang teks putih, dan di ujung gelap teks hitam, tidak dapat melampaui 4,5:1. Jika Anda butuh latar untuk teks, lebih cepat mengundi dari nada Pastel (teks hitam) atau Gelap (teks putih). Gradien contoh hero, persik → merah muda → lavender, memiliki kontras 1,4:1 untuk teks putih dan 7,3:1 untuk teks hitam.

Menyimpan sebagai PNG

Lebar dan tinggi juga bisa diketik langsung sebagai bilangan bulat antara 16 dan 4096 px. PNG tidak dikirim ke server. Browser menghitung dan menggambarnya piksel demi piksel. Panjang garis gradien pada linear, farthest-corner pada radial, sudut pada kerucut, dan tumpukan pada mesh dihitung dengan rumus yang sama seperti CSS, dan ruang pencampuran yang dipilih dipakai apa adanya. Gradien yang landai pada bidang luas mudah menampakkan garis berundak (banding) jika disimpan dengan warna 8 bit, sehingga ditambahkan angka acak kecil ±0,5 tingkat pada tiap kanal sebelum dibulatkan (dithering).

Jika rasio gambar berbeda dari panggung, CSS yang sama tampil sedikit berbeda. Misalnya, gradien linear 90° (kiri → kanan) memiliki panjang garis yang sama dengan lebar kotak, sehingga pada gambar selebar 1920 px warnanya berubah lebih lambat daripada pada gambar selebar 1080 px.

Kesalahan yang sering terjadi

• Membaca sudut sebagai sudut matematika: 0deg di CSS menunjuk ke atas. Jika 0° dianggap menunjuk ke kanan seperti di matematika, arahnya meleset 90°.
• Hanya menempel baris OKLCH: di browser yang tidak mengenal ruang pencampuran, seluruh latar hilang. Sertakan baris sRGB di depannya.
• Menukar urutan baris sRGB dan baris OKLCH: deklarasi yang datang belakangan menang, sehingga jika baris sRGB ditaruh di belakang, bagian tengah tampak kusam bahkan di browser baru.
• Sambungan pada gradien kerucut: jika warna terakhir berbeda dari warna pertama, batas yang tajam muncul di posisi 0deg di atas. Menulis warna pertama sekali lagi di akhir menyambungkannya.
• Mengukur kontras teks hanya di satu titik: di ujung gradien yang terang mungkin lulus, tetapi di ujung yang gelap bisa tidak lulus. Lihat nilai terendah di seluruh area tempat teks mungkin berada.

Keterbatasan dan catatan

• Karena diundi, hasilnya selalu berbeda meskipun pengaturannya sama. Hasil sebelumnya hanya bisa dikembalikan lewat tautan atau 20 riwayat terbaru, dan riwayat hanya tersimpan di browser ini (10 riwayat dari versi lama dipindahkan satu kali saja di awal).
• Jika warna hasil campuran keluar dari jangkauan sRGB, nilainya dipangkas per kanal saat dihitung. Jika browser menyesuaikannya dengan cara lain, warna di layar dan di PNG bisa sedikit berbeda.
• Posisi titik warna hanya merata. Untuk menyetel posisi atau warna titik satu per satu, generator gradien CSS lebih cocok.
• Kontras teks hanya melihat nilai terendah di seluruh gradien untuk teks putih dan hitam. Posisi teks sebenarnya, ketebalan, bayangan, dan perbedaan penglihatan warna tidak diperhitungkan.
• PNG dibuat hingga 4096 px per sisi. Di ponsel, menggambar gambar besar bisa memakan waktu beberapa detik.

Tanggal acuan Spesifikasi CSS, dukungan browser, dan sumber WCAG diperiksa pada 2026-10-20. Persentase dalam tabel adalah nilai yang dihitung langsung dengan aturan pembuatan alat ini.

Sumber

• 01W3C: CSS Images Module Level 3§3.1.1 0deg menunjuk ke atas dan 90deg ke kanan, panjang garis gradien abs(W·sinA) + abs(H·cosA), §3.2 ukuran radial bawaan farthest-corner
• 02W3C: CSS Images Module Level 4Penentuan ruang pencampuran dalam sintaks linear, radial, dan kerucut, sudut awal kerucut 0deg ke atas dan searah jarum jam, Oklab jika tidak ditentukan
• 03W3C: CSS Color Module Level 4§13 Interpolasi: jika hanya notasi sRGB lama yang dipakai, pencampuran dalam sRGB berkode gamma, alfa premultiplied, bawaan sudut rona kutub adalah shorter
• 04Björn Ottosson: A perceptual color space for image processingDefinisi Oklab dan matriks konversi sRGB (2020-12-23)
• 05MDN: linear-gradient()Tabel kompatibilitas browser: penentuan ruang pencampuran di Chrome dan Edge 111, Firefox 127, Safari 16.2
• 06MDN: conic-gradient()Tabel kompatibilitas browser: Chrome 69, Edge 79, Firefox 83, Safari 12.1
• 07W3C: WCAG 2.21.4.3 kontras 4,5:1 (teks besar 3:1), teks besar 18 pt atau 14 pt tebal, rumus rasio kontras
• 08W3C: Understanding SC 1.4.3 Contrast (Minimum)Menyebut gambar latar yang kontrasnya tidak cukup terhadap teks sebagai kegagalan, G18 adalah kontras antara teks dan latar di belakangnya

Pertanyaan yang sering diajukan

Alat yang sering dipakai bersama