CSS Gradient Generator — Linear, Radial & Conic

Susun gradient CSS dengan stop yang bisa digeser, pilih linear, radial, conic, atau repeating, tambahkan interpolasi in oklch, lalu salin CSS siap tempel. Setiap warna diperiksa kontras WCAG-nya agar teks di atasnya tetap terbaca.

🎨 3 Tipe Gradient 🎚️ Stop Editor 🌈 in oklch ♿ Kontras WCAG 📋 CSS Siap Tempel

💡 Ringkasan Inti CSS Gradient

📜 Linear · Radial · Conic

Gradient CSS dibuat dengan fungsi gambar: linear-gradient(sudut, stop…) untuk arah lurus, radial-gradient(bentuk at posisi, stop…) untuk memancar dari satu titik, dan conic-gradient(from sudut at posisi, stop…) untuk menyapu seperti roda warna. Setiap stop ditulis sebagai warna + posisi persen, misalnya linear-gradient(135deg, #667eea 0%, #764ba2 100%). Sejak CSS Color 4, interpolasi bisa dipindah ke ruang warna lain dengan menyisipkan `in oklch` setelah sudut — hasilnya gradasi lebih merata secara perseptual dan tidak keruh di tengah seperti interpolasi sRGB default. Untuk teks di atas gradient, periksa kontras pada titik paling ekstrem, bukan warna rata-rata.

Linear linear-gradient(135deg, …)

Radial radial-gradient(circle at 50% 50%, …)

Conic conic-gradient(from 0deg, …)

Repeating repeating-linear-gradient(…)

Interpolasi … 120deg in oklch, …

Stop warna + posisi %

⚡ Preset:—

💾 Workspace:Konfigurasi tersimpan privat di browser

1Warna & Posisi Stop

0–100%

2Tipe & Geometri

CSS Images 3

Tipe

Sudut (deg)

Ruang Interpolasi

repeating- — pola berulang mengikuti jarak stop

🎨Pratinjau & CSS

linear

STOP

2 stop

RUANG WARNA

sRGB

SUDUT / POSISI

135°

CAKUPAN

background-image

Stop	vs putih	AA?	vs hitam	AA?

—

🖼️ EKSPOR PNG

—

📐 Linear

linear-gradient(135deg, a 0%, b 100%)

Sudut 0deg = ke atas; 90deg = ke kanan.

🎯 Radial

radial-gradient(circle at 50% 50%, …)

Bentuk dan posisi ditulis sebelum daftar stop.

🎡 Conic

conic-gradient(from 0deg at 50% 50%, …)

Menyapu searah jarum jam dari sudut awal.

Dwi Kurniawan, S.E. ✓ Verified Author & Developer

Industrial Technologist & Praktisi K3 · Pengembang Dwik.web.id

💡 Cerita di Balik Pembuatan Alat Ini

Gradient terlihat seperti urusan selera sampai teks di atasnya tidak terbaca di HP dengan layar redup. Dua kesalahan yang paling sering saya temui di review antarmuka: stop dibuat berpasangan terang-gelap tanpa memeriksa kontras di titik ekstrem, dan gradasi biru-ke-kuning dibiarkan di sRGB sehingga bagian tengahnya menjadi abu-abu kusam. Keduanya bisa diperbaiki dalam satu menit — kalau angkanya ditampilkan.

🎯 Misi: Membuat gradient CSS yang bisa disalin langsung, dengan stop yang bisa digeser, pilihan ruang interpolasi modern, dan rasio kontras WCAG dihitung per warna.

Tipe	Sintaks	Kontrol yang tersedia	Contoh
Linear	`linear-gradient(sudut, stop…)`	sudut 0–360deg	`linear-gradient(135deg, #667eea 0%, #764ba2 100%)`
Radial	`radial-gradient(bentuk at posisi, stop…)`	bentuk (circle/ellipse), posisi X/Y	`radial-gradient(circle at 30% 70%, #43e97b 0%, #38f9d7 100%)`
Conic	`conic-gradient(from sudut at posisi, stop…)`	sudut awal, posisi pusat	`conic-gradient(from 0deg at 50% 50%, #f97316 0%, #a855f7 50%, #22d3ee 100%)`
Repeating	`repeating-<tipe>-gradient(…)`	sama + jarak stop menentukan panjang pola	`repeating-linear-gradient(90deg, #000 0%, #fff 10%)`

Sudut 0deg mengarah ke atas; 90deg ke kanan; 180deg ke bawah. Metode interpolasi ditulis SETELAH sudut, sebelum daftar stop.

Ruang interpolasi	Kata kunci CSS	Kesan gradasi	Catatan
sRGB (default)	—	Umum, bisa keruh di tengah	Paling kompatibel; semua peramban
srgb-linear	`in srgb-linear`	Transisi lebih terang	Cocok untuk simulasi cahaya
oklab	`in oklab`	Merata secara perseptual	Pilihan aman untuk gradasi warna jauh
oklch	`in oklch`	Merata + hue konsisten	Terbaik untuk transisi biru–kuning
hsl / hwb	`in hsl` · `in hwb`	Berputar lewat hue	Hati-hati: bisa melewati warna tak diinginkan
lab / lch	`in lab` · `in lch`	Mirip oklab/oklch, saturasi berbeda	Dukungan lebih terbatas daripada oklab

Metode interpolasi warna adalah bagian CSS Color 4 dan belum didukung semua peramban lama. Sertakan deklarasi fallback tanpa in … agar gradasi tetap tampil — alat ini menuliskannya di blok CSS siap tempel.

Rasio kontras	Teks normal	Teks besar (≥18,66px bold / 24px)	Komponen UI
≥ 7:1	AAA	AAA	Aman
4,5–6,99:1	AA	AAA	Aman
3–4,49:1	Gagal	AA	Aman (min 3:1)
< 3:1	Gagal	Gagal	Gagal

Ambang dari WCAG 2.1 (1.4.3 kontras minimum dan 1.4.11 kontras non-teks). Untuk gradient, uji pada titik paling ekstrem — bukan warna tengah.

Tanya Jawab CSS Gradient

Linear-gradient mewarnai sepanjang satu garis lurus dengan sudut tertentu — 135deg berarti dari kiri atas ke kanan bawah. Radial-gradient memancar dari satu titik, ditulis dengan bentuk dan posisi (circle at 50% 50%). Conic-gradient menyapu seperti jarum jam mengelilingi titik pusat, cocok untuk roda warna atau indikator progres. Ketiganya menerima daftar stop yang sama: warna diikuti posisi persen.

Karena interpolasi sRGB mencampur angka kanal secara linear, bukan mencampur cahaya secara perseptual. Dua warna berlawanan seperti biru dan kuning akan melewati area abu-abu kusam. CSS Color 4 memperbaiki ini dengan metode interpolasi warna: menyisipkan `in oklch` atau `in oklab` setelah sudut membuat pencampuran mengikuti ruang warna perseptual, sehingga gradasi tetap bercahaya di tengah.

Pakai awalan repeating- dan pastikan stop terakhir lebih kecil dari 100%, karena jarak antar-stop menentukan panjang pola. Contoh: repeating-linear-gradient(90deg, #000 0%, #fff 10%) menghasilkan garis hitam-putih berulang setiap 10% lebar elemen. Bila stop terakhir 100%, pola tidak berulang karena satu siklus sudah memenuhi seluruh elemen.

Kontras tidak boleh dinilai dari warna rata-rata, tetapi dari titik paling ekstrem. Alat ini menghitung rasio kontras WCAG tiap stop terhadap teks putih dan hitam: 4,5:1 untuk teks normal (AA) dan 3:1 untuk teks besar. Bila salah satu ujung gradient gagal, tambahkan overlay gelap/terang di atas gradient atau pilih stop yang lebih kontras — jangan mengandalkan shadow teks sebagai solusi aksesibilitas.

Bisa, terutama pada gradasi gelap-ke-gelap di layar 8-bit. Tiga cara mengurangi: pilih stop yang berdekatan nilainya, tambahkan satu stop antara untuk memecah transisi, atau gunakan gradient sebagai lapisan di atas warna dasar solid sehingga perbedaan antar-tingkat lebih kecil. Banding juga berkurang bila interpolasi dilakukan di ruang oklab/oklch.

Gradient diwarnai GPU sebagai gambar, jadi jauh lebih ringan daripada file gambar berukuran besar dan tidak menambah permintaan jaringan. Yang perlu diwaspadai adalah gradient yang dianimasikan pada properti layout (mis. background-position pada area luas) — itu memicu repaint setiap frame. Untuk animasi, gunakan transform/opacity pada lapisan terpisah.

📖 Cara Menggunakan Membuat Gradient CSS

1. Atur stop

Geser slider untuk posisi, klik kotak warna untuk mengganti. Tambah hingga 8 stop.

2. Pilih tipe & ruang warna

Linear untuk hero, radial untuk spotlight, conic untuk roda/indikator. Coba `in oklch` bila gradasi tampak keruh.

3. Periksa kontras

Tabel kontras menandai AA/AAA per stop terhadap teks putih dan hitam.

4. Salin atau ekspor

Salin blok CSS (dengan fallback), unduh PNG, atau cetak spesifikasi A4.

💡 Catatan Praktik

🎨 Fallback Warna Selalu sertakan background solid sebelum gradient untuk peramban/klien email lama.

♿ Kontras Ekstrem Uji titik paling terang & gelap; rata-rata menipu.

🌈 Coba oklch Gradasi biru→kuning di sRGB melewati abu-abu; oklch menjaga warna tetap hidup.

📏 Banding Gradasi gelap-ke-gelap rawan garis; tambah stop antara untuk memecah transisi.

📚 Panduan Terkait & Referensi Studi Kasus

Kajian teknis & implementasi lapangan

📖 KARIER

Panduan Work-Life Integration & Produktivitas Kerja

Baca Panduan Lengkap →

📖 KARIER

Framework Pengambilan Keputusan Manajerial & Operasional

Baca Panduan Lengkap →

🔗 Coba Juga Tools Lain

Tools ini cocok dipadukan dengan kalkulator lainnya:

🌑 Box Shadow
Elevasi & bayangan ⭕ Border Radius
Sudut membulat 🧊 Glassmorphism
Efek kaca 🎨 Color Palette
Palet warna ♿ Color Contrast
Uji WCAG 🧱 CSS Grid
Layout grid

🔗 Alat Terkait yang Mungkin Anda Butuhkan

🐛 Ada Masukan?

Tool ini dikembangkan sendiri. Laporkan bug atau usulkan fitur — semua masukan dibaca!

🐛 Laporkan Bug 💡 Usulkan Fitur

❤️ Dukung & Bagikan

Jika tools ini bermanfaat, bantu lebih banyak orang menemukannya ya 😊

☕ Traktir Dwi Secangkir Kopi Dukunganmu membantu tools ini tetap gratis dan terus berkembang.

Bagikan ke:

𝕏 f in 💬

Terakhir diperbarui: 25 Oktober 2026 · dwik.web.id

Tanya Jawab & Diskusi Teknis

Diskusi Penggunaan CSS Gradient Generator — Linear, Radial & Conic

Ada pertanyaan seputar rumus perhitungan, dasar regulasi, kendala teknis, atau saran pengembangan alat ini? Tuliskan diskusi Anda di bawah.

Hemat kuota & memori — komentar dimuat hanya saat Anda inginkan.