Buat gradien linear, radial, dan conic dengan stop tanpa batas, interpolasi yang mengenali OKLCH, dan output utility Tailwind v4. Pratinjau langsung, 30+ preset, di browser Anda.
Linear memadukan sepanjang garis lurus pada sudut yang dipilih (0° = ke atas, 90° = ke kanan). Radial memadukan dari titik pusat ke luar — circle atau ellipse, dengan kata kunci ukuran seperti farthest-corner. Conic berputar mengelilingi titik pusat — color stop berada pada sudut seperti jarum jam. Conic sangat cocok untuk diagram pai, tampilan dial, dan latar color-wheel sintetis.
Saat bertransisi antara rona yang tidak analog — misalnya biru → kuning, atau merah → hijau. Interpolasi sRGB default melewati titik tengah abu-abu keruh; OKLCH (CSS Color Module 4 in oklch) menjaga titik tengah tetap hidup karena menginterpolasi dalam ruang yang seragam secara perseptual. Untuk gradien dua-stop antara rona serupa, perbedaannya kecil. Untuk gradien multi-stop atau rentang rona lebar, OKLCH jauh lebih baik.
Linear / radial / conic, OKLCH-smooth, sadar Tailwind — plus beberapa sentuhan kecil yang membuatnya benar-benar menyenangkan digunakan.
Linear dengan sudut 0-360°, radial dengan circle/ellipse + ukuran + posisi, conic dengan from-angle + posisi. Semua menghasilkan sintaks CSS Images Module Level 4 yang sesuai standar.
Tambahkan stop pada persen mana pun, seret slider posisi untuk penyesuaian halus, klik swatch untuk memilih warna atau tempel HEX. Stop diurutkan otomatis pada output. Klik × untuk menghapus (minimum 2 stop).
Beralih antara sRGB default dan interpolasi modern in oklch. OKLCH memberikan titik tengah yang lebih halus secara perseptual — tanpa pita abu-abu keruh pada lompatan rona. Mundur dengan mulus pada browser yang belum menyertakan CSS Color 4.
Tiga panel output diperbarui secara langsung: CSS mentah (background-image: linear-gradient(...)), utility nilai-arbitrer Tailwind v4 (bg-[linear-gradient(...)]), dan cuplikan token desain JSON yang siap untuk Style Dictionary atau Figma Tokens.
Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — klik untuk memuat dan menyesuaikan. Setiap preset adalah titik awal berkualitas produksi yang nyata, bukan sekadar nama.
Pratinjau dirender dengan background-image native sehingga apa yang Anda lihat persis sama dengan yang dihasilkan stylesheet Anda. Setiap piksel berjalan secara lokal — buka DevTools → Network dan verifikasi nol permintaan keluar.
Empat langkah dari kanvas kosong hingga CSS, Tailwind, atau JSON yang siap produksi.
Linear untuk latar, header, bagian hero. Radial untuk spotlight, vignette, tombol berpendar. Conic untuk diagram pai, color wheel, dan latar sintetis kekinian. Beralih di antaranya dengan tab — color stop Anda dipertahankan saat berpindah.
Klik swatch warna untuk membuka pemilih, atau tempel HEX langsung ke kolom. Seret slider untuk menyetel posisi stop 0-100%. Klik + Tambah stop untuk menyisipkan stop baru pada celah terbesar (dengan warna titik tengah). Maksimum 12 stop.
Untuk linear, setel sudut (0° menunjuk ke atas, 90° ke kanan). Untuk radial, pilih bentuk, kata kunci ukuran, dan posisi tengah. Untuk conic, setel sudut awal. Beralih Interpolasi warna ke OKLCH untuk titik tengah yang halus secara perseptual pada gradien multi-rona.
Tiga panel diperbarui secara langsung: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (bentuk token desain). Gunakan ikon salin pada masing-masing, atau tekan Unduh CSS untuk menyimpan file gradient.css yang siap dimasukkan ke proyek.
Empat skenario umum di mana tool browser yang mengutamakan privasi mengalahkan membuka Figma + situs gradien terpisah.
Pilih preset yang dekat dengan brand Anda, masukkan dua warna brand ke dalam stop, beralih ke interpolasi OKLCH untuk titik tengah yang bersih. Salin CSS, tempel ke stylesheet hero Anda. Total waktu: di bawah 2 menit.
Bangun gradien brand 3-stop sekali, salin sebagai token desain JSON, masukkan ke Style Dictionary / Figma Tokens. Sekarang setiap tombol + kartu di setiap platform menggunakan gradien yang sama berdasarkan referensi. Perbarui di satu tempat, menyebar ke mana-mana.
Gradien conic sintetis sempurna untuk visual diagram pai, dial progres, atau status shimmer 'data-loading'. Pilih jenis conic, atur from-angle, masukkan stop pada persentase yang tepat — matematikanya mencocokkan sudut 0-360° ke posisi persen secara persis.
Bangun gradien, atur rasio aspek agar sesuai dengan target Anda (16:9 untuk slide, 1:1 untuk IG, 3:1 untuk header X), screenshot pratinjaunya. Atau salin CSS ke file HTML sekali pakai dan screenshot di browser Anda pada ukuran piksel persis yang Anda perlukan.
Warna dan gradien Anda tidak pernah meninggalkan perangkat Anda. Buka DevTools → Network dan Anda akan melihat nol permintaan keluar selama operasi apa pun.
background-image CSS native — sehingga gradien yang dirender sama persis dengan yang akan dihasilkan stylesheet Anda di browser pengguna.
Bacaan pilihan tentang gradien CSS, interpolasi OKLCH, dan sistem token desain.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Linear memadukan sepanjang garis lurus pada sudut yang dipilih (0° = ke atas, 90° = ke kanan). Radial memadukan dari titik pusat ke luar — circle atau ellipse, dengan kata kunci ukuran seperti farthest-corner. Conic berputar mengelilingi titik pusat — color stop berada pada sudut seperti jarum jam. Conic sangat cocok untuk diagram pai, tampilan dial, dan latar color-wheel sintetis.
Saat bertransisi antara rona yang tidak analog — misalnya biru → kuning, atau merah → hijau. Interpolasi sRGB default melewati titik tengah abu-abu keruh; OKLCH (CSS Color Module 4 in oklch) menjaga titik tengah tetap hidup karena menginterpolasi dalam ruang yang seragam secara perseptual. Untuk gradien dua-stop antara rona serupa, perbedaannya kecil. Untuk gradien multi-stop atau rentang rona lebar, OKLCH jauh lebih baik.
Utility nilai-arbitrer yang bisa Anda tempel langsung ke JSX / Blade / HTML: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. Tidak perlu perubahan tailwind.config.js; berfungsi pada proyek Tailwind 4 mana pun. Jika Anda lebih suka token warna bernama, salin CSS-nya dan konversi secara manual.
Gradien linear dan radial telah didukung secara universal sejak 2014. Gradien conic hadir di semua browser evergreen pada 2021. Kata kunci interpolasi in oklch didukung di Chrome 111+, Safari 16.2+, Firefox 113+. Jika Anda perlu mendukung browser lama, gunakan interpolasi sRGB default — perbedaan visual paling penting untuk gradien multi-stop dengan lompatan rona.
Tidak. Pembuatan string gradien, serialisasi CSS / Tailwind / JSON, dan pratinjau langsung semuanya berjalan dalam JavaScript di perangkat Anda. Buka DevTools → Network dan Anda akan melihat nol permintaan keluar selama operasi apa pun. Tempel warna brand, token internal — tidak ada yang meninggalkan laptop Anda.