Generator Gradien CSS

Generator gradien CSS visual yang berjalan di browser Anda

CSS gradient generator ini mengubah sintaks linear-gradient(), radial-gradient(), dan conic-gradient() yang ribet menjadi beberapa klik saja. Tambahkan dan seret color stop di gradient bar, atur sudut atau titik pusat, dan lihat pratinjau langsung ukuran penuh diperbarui seiring Anda bekerja. Ketika tampilannya sudah pas, salin kode siap produksi. Tidak ada yang perlu diinstal dan tidak ada akun yang perlu dibuat, dan setiap gradien dirender secara lokal sehingga tidak ada yang Anda buat pernah diunggah.

Tool ini dirancang menjadi satu-satunya tool gradien yang Anda butuhkan: lebih lengkap dibanding generator satu fungsi seperti cssgradient.io (tanpa dukungan conic, tanpa output Tailwind) atau ekstensi browser Colorzilla (tanpa ekspor PNG). Berbeda dari tool background gradien Canva yang mengunci fitur di balik akun, atau tool gradien Adobe yang memerlukan langganan Creative Cloud, semuanya di sini gratis.

Linear, radial, dan conic — setiap jenis gradien

Beralih antara linear gradient generator (blend sepanjang sudut), radial gradient generator (sorotan dari titik pusat, lingkaran atau elips, dengan kontrol ukuran dan posisi), dan conic gradient generator (warna disapukan mengelilingi satu titik untuk roda warna dan bagan). Setiap jenis mengekspos tepatnya kontrol yang dibutuhkan: sudut untuk linear, bentuk/ukuran/posisi untuk radial, sudut awal dan pusat untuk conic.

Tambahkan color stop tanpa batas, seret untuk mengatur ulang posisinya, dan tetapkan opasitas per-stop untuk membuat gradien transparan yang halus dengan rgba(). Klik bar untuk menjatuhkan stop baru tepat di tempat Anda menunjuk. Kebanyakan tool pesaing seperti Colorzilla hanya mendukung dua atau tiga stop; di sini tidak ada batasnya, sehingga gradien lima atau enam stop yang kompleks sama mudahnya dengan blend dua warna sederhana.

Salin CSS, Tailwind, atau SCSS — dan ekspor PNG

Output tinggal satu tab jauhnya. Tab CSS memberi Anda deklarasi background siap pakai dengan fallback -webkit- opsional (dikonversi sudutnya dengan benar untuk browser lama). Tab Tailwind menghasilkan utilitas bg-gradient-to-r from-[...] to-[...] yang idiomatik untuk gradien linear, dengan fallback ke nilai arbitrary bg-[linear-gradient(...)] untuk radial dan conic. Tab SCSS membungkus nilainya dalam variabel $gradient yang bisa dipakai ulang.

Butuh raster? Download PNG menggambar gradien yang persis sama ke canvas berukuran 1600x900 — gradient PNG download sungguhan tanpa watermark dan tanpa bolak-balik ke server. Adobe Express meletakkan ini di balik langganan. TinyWow mengharuskan unggah file. Di sini gratis dan tidak ada yang meninggalkan perangkat Anda.

Buat gradien dari sebuah gambar

Ingin gradien yang sesuai dengan foto brand, screenshot, atau foto produk? Gunakan From image: tool ini mengambil sampel piksel gambar langsung di browser Anda, menemukan warna dominannya, dan membuat gradien multi-stop dari warna-warna itu, diurutkan dari terang ke gelap untuk blend yang halus. Karena analisisnya berjalan secara lokal, gambar tersebut tidak pernah diunggah ke mana pun.

Dari sana Anda bisa menggeser stop yang diekstrak, mengubah sudut, menurunkan opasitas sebuah warna, atau beralih ke blend radial atau conic. Ini adalah cara tercepat untuk membangun potongan gradient background CSS yang menyatukan bagian hero, kartu, atau tombol dengan gambar yang sudah ada — tanpa plugin Figma atau ekstensi Adobe.

Preset, randomizer, dan link yang bisa dibagikan

Kehabisan ide? Ketuk preset pilihan — sunset, ocean, aurora, mint, peach, dan lainnya — untuk memuat gradien yang sudah dipoles, lalu sesuaikan dari sana. Tekan Random untuk kombinasi dua atau tiga warna yang segar dan harmonis. Ini titik awal yang baik saat Anda butuh sesuatu yang terlihat bagus tanpa menghabiskan waktu untuk teori warna.

Setiap perubahan yang Anda buat dikodekan ke dalam URL halaman, sehingga Copy link memberi rekan tim gradien persis yang sedang Anda lihat — tanpa ekspor, tanpa akun, tanpa screenshot. Link tersebut membawa warna, jenis, sudut, dan stop-nya, sehingga berjalan sepenuhnya di sisi klien tanpa pencarian ke server. Sesuatu yang tidak bisa dilakukan Figma dan Canva tanpa akun.

Privat dan gratis — tanpa unggah, tanpa akun

Tidak ada pendaftaran, tidak ada biaya, dan tidak ada yang perlu diunggah. CSS gradient maker ini berjalan sepenuhnya di perangkat Anda menggunakan JavaScript dan HTML canvas, sehingga warna brand rahasia dan desain yang belum dirilis tidak pernah meninggalkan browser Anda. Simpan bookmark sebagai generator gradien linear, radial, dan conic andalan Anda untuk background, tombol, bagian hero, overlay, dan bagan. Salin CSS, Tailwind, atau SCSS, atau ekspor PNG, kapan pun Anda membutuhkannya. Berfungsi sama baiknya di iPhone, Android, Windows, dan Mac.

Sintaks gradien CSS secara mendalam: sudut, bentuk, dan hard stop

linear-gradient menerima baik keyword arah (to right, to bottom right) maupun nilai derajat. Nilai derajat mengukur sudut garis gradien searah jarum jam dari titik awal jam 12: 0deg mengarah dari bawah ke atas, 90deg mengarah dari kiri ke kanan, 180deg mengarah dari atas ke bawah, dan 45deg memotong diagonal dari sudut kiri-bawah. to right dan 90deg identik; bentuk keyword lebih mudah dibaca, sementara bentuk derajat memungkinkan Anda menetapkan sudut pecahan seperti 37deg secara presisi.

radial-gradient memberi Anda kontrol atas tiga sumbu independen: bentuk (circle atau ellipse), ukuran (keyword closest-side, closest-corner, farthest-side, atau farthest-corner, yang menentukan di mana gradien berakhir relatif terhadap kotak penampungnya), dan posisi (nilai background-position CSS mana pun yang valid, default-nya center). conic-gradient menyapukan warna mengelilingi titik pusat seperti diagram lingkaran. Menambahkan argumen from <angle> memutar awal sapuan tersebut, sehingga conic-gradient(from 90deg, red, blue) memulai sapuan mengarah ke kanan alih-alih ke atas. Gradien conic menghasilkan roda warna, diagram lingkaran, cincin progres, dan efek glow angular tanpa SVG atau JavaScript apa pun.

Gradien berulang — repeating-linear-gradient dan repeating-radial-gradient — mengulang urutan stop yang ditentukan untuk mengisi elemen, memungkinkan Anda membangun garis-garis, pola hatch, dan efek sunburst hanya dengan CSS dalam satu properti. Hard stop dibuat dengan menempatkan dua color stop di posisi yang sama: linear-gradient(red 50%, blue 50%) menghasilkan pembagian bersih 50/50 tanpa blend sama sekali. Hard stop adalah bahan pembangun untuk background papan catur, bendera khusus CSS, dan desain apa pun yang membutuhkan tepi tajam antara dua warna — tanpa gambar, tanpa clip-path yang dibutuhkan.

Masalah interpolasi warna — dan mengapa gradien OKLCH terlihat lebih baik

Secara default, browser menginterpolasi warna gradien di ruang warna sRGB, yang menyebabkan artefak visual yang sudah dikenal luas: gradien dari merah ke biru melewati titik tengah abu-ungu yang tampak kusam. Masalahnya bersifat geometris — tiga sumbu sRGB tidak seragam secara persepsi, sehingga jalur garis lurus antara dua hue yang cerah melintasi wilayah dengan chroma rendah. Hasilnya terlihat kusam di bagian tengah meskipun warna awal dan akhirnya sepenuhnya jenuh.

CSS Color Level 4 memperkenalkan solusinya: Anda bisa mendeklarasikan ruang warna mana yang dipakai untuk interpolasi dengan menulis in <colorspace> sebagai argumen pertama. linear-gradient(in oklch, red, blue) menginterpolasi di OKLCH — ruang yang seragam secara persepsi di mana langkah numerik yang sama menghasilkan perubahan kecerahan yang tampak sama — dan titik tengahnya tetap cerah dan jenuh sepanjang jalur. Gradien OKLCH didukung di semua browser utama sejak 2023 (Chrome 111, Firefox 113, Safari 16.2). Opsi in hsl adalah alternatif yang lebih ringan yang menghindari titik tengah abu-abu pada warna yang berdekatan hue-nya tetapi masih bisa turun kecerahannya pada busur hue yang lebih panjang; in lch adalah interpolasi LCH, seragam secara persepsi tetapi tanpa penanganan biru-ungu yang lebih baik dari OKLCH.

Kesimpulan praktisnya: kapan pun Anda membuat gradien multi-hue — terutama merah→biru, hijau→ungu, atau pasangan mana pun yang terpisah lebih dari 90° di roda warna — beralih ke in oklch memberi Anda warna yang lebih kaya tanpa stop tambahan. Untuk gradien antara dua nuansa dari hue yang sama (misalnya biru muda ke biru tua), sRGB dan OKLCH terlihat hampir identik, sehingga default-nya sudah cukup. Anda bisa bereksperimen dengan pengaturan ruang warna di panel Advanced tool ini untuk melihat perbedaan interpolasinya secara langsung di browser Anda.

Sejarah desain gradien: dari skeuomorphism hingga mesh gradient

Gradien pernah ada di mana-mana pada era skeuomorfik desain UI (kira-kira 2007–2012), di mana bevel tombol yang mengilap dan sidebar bertekstur kulit mengandalkan highlight radial dan shading terang-ke-gelap linear untuk mensimulasikan permukaan fisik. Ketika iOS 7 Apple (2013) dan Material Design Google (2014) memulai era flat design, gradien jatuh secara tajam dari mode — satu warna datar tunggal menjadi tanda selera modern. Generator gradien CSS mengalami kemerosotan, dan banyak style guide melarangnya sama sekali.

Kebangkitan gradien dimulai pada Juni 2016 ketika Instagram mengganti ikon kameranya dengan logo gradien coral-ke-ungu yang berani — penolakan sengaja terhadap monogram coklat datar sebelumnya. Redesain ini kontroversial selama sekitar 48 jam dan kemudian menjadi sangat berpengaruh: dalam setahun, gradien multi-hue yang cerah telah menyebar ke ikon aplikasi, halaman landing, dan identitas brand. Efek duotone — overlay gradien dua warna pada gambar grayscale, dipopulerkan oleh kampanye festival Spotify 2015–2016 — menjadi andalan desain editorial dan industri musik.

Mesh gradient muncul sebagai tren dominan sejak 2021. Berbeda dari gradien CSS, yang bertransisi sepanjang satu sumbu atau dari satu titik, mesh gradient menempatkan beberapa node warna pada posisi sembarang dan menginterpolasi di antara semuanya secara bersamaan, menghasilkan medan warna berbentuk gumpalan organik. CSS murni tidak bisa menghasilkan mesh gradient sungguhan (mereka membutuhkan filter SVG <feComposite> atau medan bezier yang digambar canvas), tetapi gaya visualnya banyak ditiru dengan gradien radial yang tumpang tindih pada opasitas rendah. Serupa dengan itu, glassmorphism — panel kaca buram yang mengambang di atas background gradien yang diburamkan — menjadi populer pada 2021 dan sepenuhnya bergantung pada gradien latar yang cerah agar efek buramnya terbaca. Memahami sejarah ini membantu Anda memilih gaya gradien yang menandakan era dan estetika yang tepat untuk proyek Anda.

Aksesibilitas: kontras pada background gradien

WCAG 1.4.3 mensyaratkan rasio kontras minimal 4,5:1 antara teks normal dan latarnya (3:1 untuk teks besar), dan persyaratan ini berlaku di setiap titik tempat teks tersebut berada — bukan hanya warna rata-rata dari gradiennya. Jika sebuah judul membentang di atas background yang berblend dari hampir-putih ke navy pekat, kontrasnya harus lolos di titik terburuk: Anda harus memeriksa warna teks terhadap bagian gradien yang paling terang yang ditutupinya. Gradien yang lolos di wilayah gelap bisa gagal di wilayah terang, dan seluruh elemen tersebut gagal memenuhi kriteria.

Pendekatan praktisnya adalah memeriksa kontras di kedua ujung gradien di bawah teks, dan di setiap stop perantara yang jatuh dalam batas teks. Tool seperti inspektur aksesibilitas bawaan browser atau ekstensi pengecek kontras menerima satu warna sampel, sehingga Anda mungkin perlu mengambil sampel dua atau tiga titik secara manual. Satu solusi yang andal adalah menempatkan overlay gelap semi-transparan — misalnya rgba(0,0,0,0.45) — di antara gradien dan lapisan teks; ini mempersempit rentang kontras sehingga teks tetap terbaca di seluruh bentangan. text-shadow (text-shadow: 0 1px 4px rgba(0,0,0,0.6)) adalah teknik umum lain yang menambah kontras lokal tanpa mengubah tampilan gradien secara visual.

WCAG juga berlaku untuk state interaktif: jika sebuah tombol menggunakan background gradien, persyaratan kontras harus dipenuhi secara independen pada state default, hover, focus, dan active-nya. Perubahan gradien saat hover yang melewati titik tengah dengan kontras rendah gagal memenuhi 1.4.3 selama transisi di browser yang merender frame perantara. Pola yang paling aman adalah menganimasikan opacity antara dua pseudo-elemen gradien yang sudah dirender sebelumnya (::before dan ::after) alih-alih menganimasikan properti gradien itu sendiri — ini menghindari baik masalah transisi kontras maupun biaya performa render dari menganimasikan background-image secara langsung.