Ekosistem Volade — Alat Web

Generator Gradien CSS online gratis

Buat gradien CSS linier, radial, dan konis dalam hitungan detik: pilih jenisnya, atur sudut dan stop warna, lihat hasil secara langsung, lalu salin kode yang siap ditempel. Tanpa akun, tanpa pengiriman: semuanya berjalan di browser Anda.

Diperbarui pada 12 Oktober 2026

Buat gradien saya Masuk
Tidak ada data yang dikirim Privat sejak awal Gratis untuk memulai
Alatnya

Susun gradien Anda, salin CSS-nya

Jenis gradien, sudut, warna, dan posisi: semuanya diperbarui secara langsung di pratinjau. Kode CSS siap di bagian bawah.

Generator Gradien CSS

Online Desain & Kreasi
Masuk
Generasi lokal — Volade tidak menerima apa pun Siap
Kode CSS
0Stop
0°Sudut
0Karakter
Contoh cepat:
0,0 0Komentar Semua alat
Gratis atau Premium?

Generator gradien CSS ini gratis dan tanpa batas: buat sebanyak yang Anda mau, tanpa akun. Gradien disusun di browser Anda — tidak ada server yang dilibatkan.

3 jenis: linier, radial, konisGratis
Sudut, posisi titik awal, dan stop warna dapat diaturGratis
Pratinjau langsung dan kode CSS yang bisa disalin dengan sekali klikGratis
Ekosistem premium lengkap (CMS, desktop, skrip, API)Premium
Jelajahi Premium
Fitur

Generator gradien CSS yang lengkap

Linier, radial, dan konis: tiga keluarga CSS

Beralih antar keluarga dengan sekali klik: set yang sama otomatis diformat ulang menjadi linear-gradient(), radial-gradient(), atau conic-gradient(). Sudut dan posisi titik awal ditampilkan atau disembunyikan sesuai jenis yang dipilih.

Pilih jenis saya

Sudut presisi dan stop warna sepenuhnya bebas

Atur sudut dari 0 hingga 360°, geser setiap stop warna di seluruh rentang 0–100%, tambahkan stop sebanyak yang Anda butuhkan. Nilai heksadesimal setiap stop juga bisa diketik langsung untuk menempelkan warna dari palet merek Anda.

Pengaturan warna presisi

Pratinjau langsung dan kode CSS siap tempel

Setiap perubahan langsung tercermin di pratinjau besar. Kode lengkap — background: linear-gradient(…); — ditulis di bagian bawah alat. Klik «Salin» untuk menaruhnya di clipboard, siap dipakai di CSS, JSX, atau gaya inline Anda.

Salin CSS saya

Privat: gradien Anda tetap di perangkat Anda

Generasi berjalan sepenuhnya di browser Anda: tidak ada yang dikirim, tidak ada yang disimpan di server. Kreasi terakhir Anda disimpan secara lokal di perangkat agar bisa dilanjutkan dari terakhir — ideal untuk bereksperimen dengan palet grafis.

Kebijakan privasi
Cara kerjanya

Buat gradien CSS dalam tiga langkah

Pilih jenisnya

Linier untuk latar berarah, radial untuk halo, konis untuk cincin. Tombol yang aktif langsung memformat ulang kode dan menampilkan pengaturan yang sesuai dengan keluarga terpilih.

Atur sudut dan warna

Geser penggeser Sudut, tentukan posisi titik awal (X/Y) untuk gradien radial dan konis, lalu atur setiap stop: pemilih warna, nilai heksadesimal, dan posisi persentase. Tambahkan stop untuk transisi yang lebih kaya.

Salin kode CSS

Baris lengkap muncul di bagian bawah alat. Klik «Salin» lalu tempel ke stylesheet, komponen, atau editor Anda — gradien akan tampil sama di mana pun CSS didukung.

FAQ

Pertanyaan umum seputar gradien CSS

Apa itu gradien CSS?
Gradien CSS adalah transisi bertahap antara dua warna atau lebih, digambar langsung oleh browser berkat fungsi linear-gradient(), radial-gradient(), atau conic-gradient(). Berbeda dengan gambar, gradien bersifat vektor: tetap tajam di semua resolusi, hanya berbobot beberapa puluh byte, dan bisa diatur sepenuhnya di CSS.
Apa perbedaan gradien linier, radial, dan konis?
Gradien linier berjalan di sepanjang garis lurus (sudut dalam derajat): ideal untuk latar header atau tombol. Gradien radial dimulai dari titik tengah dan menyebar dalam bentuk lingkaran atau elips: sempurna untuk halo atau latar hero. Gradien konis berputar mengelilingi sebuah titik, seperti jarum jam: sempurna untuk cincin, diagram lingkaran, atau efek "bingkai".
Bagaimana mengontrol sudut gradien linier?
Sudut dinyatakan dalam derajat (deg) tepat setelah linear-gradient(: 0deg menghadap ke atas, 90deg ke kanan, 180deg ke bawah. Alat ini otomatis menghasilkan nilai dari posisi penggeser Sudut — Anda hanya perlu menyalin kodenya.
Apa itu stop warna (color stops)?
Satu stop warna menghubungkan sebuah warna dengan posisi di sepanjang gradien (dalam %). Dua stop cukup untuk gradien sederhana; menambahkan lebih banyak menciptakan pita, transisi lebih lembut, atau efek multi-warna. Anda bisa menggeser setiap stop dengan penggeser Posisi serta menambah atau menghapus stop dengan sekali klik.
Bagaimana memakai gradien yang dihasilkan di CSS saya?
Salin baris yang dihasilkan dari area keluaran, lalu tempel ke stylesheet atau gaya inline Anda: background: linear-gradient(...);. Anda juga bisa menggunakannya sebagai color-image untuk mask, placeholder gambar, atau sebagai nilai background-image yang ditumpangkan di atas warna cadangan.
Apakah gradien CSS berfungsi di semua browser?
Ya: linear-gradient dan radial-gradient didukung oleh semua browser modern selama bertahun-tahun, termasuk di perangkat mobile. conic-gradient juga didukung di versi terbaru Chrome, Firefox, Safari, dan Edge. Untuk browser lama, sediakan saja warna polos sebagai cadangan.
Apakah saya bisa menumpangkan gradien di atas gambar?
Ya: pada properti background (shorthand), letakkan gradien sebelum gambar — background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Gradien tampil di atas gambar; nilai rgba() mengontrol opasitas selimutnya.
Apakah alat ini privat dan gratis?
Ya: generasi berjalan sepenuhnya di browser Anda, tidak ada yang dikirim ke server dan tidak ada yang disimpan di luar perangkat Anda (kecuali kreasi terakhir di localStorage, demi kenyamanan Anda). Alat ini sepenuhnya gratis, tanpa batas, dan bisa diakses tanpa akun, baik di komputer maupun mobile.
Panduan lengkap

Semua yang perlu diketahui tentang gradien CSS

Gradien CSS adalah cara paling ringan dan fleksibel untuk mempercantik latar, tombol, atau kartu. Tak perlu lagi mengekspor PNG dari editor gambar: browser menghitung transisi antar warna Anda, secara vektor, hanya dengan beberapa puluh byte. Generator gradien CSS dari Volade menghasilkan kode yang tepat — sudut, stop, posisi titik awal — saat Anda menyusunnya di layar.

linear-gradient: gradien berarah

Fungsi linear-gradient() menerima sebuah sudut diikuti stop: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). Sudut 0deg menghadap ke atas, 90deg ke kanan, 180deg ke bawah. Tanpa sudut, browser bergerak dari atas ke bawah. Ini sintaks yang paling banyak dipakai untuk header, tombol ajakan bertindak, dan banner bagian.

radial-gradient: halo dan elips

Fungsi radial-gradient() berawal dari sebuah titik (secara default pusat) dan menyebar dalam lingkaran atau elips. Posisi titik awal ditulis at X% Y%: radial-gradient(circle at 50% 50%, …). Sempurna untuk efek halo di belakang judul, latar hero yang mengarah ke tengah, atau bayangan lembut sintetis. Alat ini menyediakan dua penggeser X dan Y untuk menempatkan titik awal hingga presisi piksel.

conic-gradient: rotasi mengelilingi titik

Fungsi conic-gradient() berputar mengelilingi sebuah titik, seperti jarum jam. Ditulis conic-gradient(from 90deg at 50% 50%, …) dan memungkinkan pembuatan cincin, meteran lingkaran, bingkai berwarna, atau efek prisma. Setiap stop menempati sektor sudut: dengan beberapa warna, Anda menggambar diagram lingkaran CSS tanpa satu pun gambar.

Stop warna (color stops)

Setiap stop menghubungkan warna dengan posisi persentase: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. Posisi identik pada dua warna menciptakan transisi tajam (tepi keras); posisi yang berjauhan menghasilkan gradasi halus. Lebih dari dua stop memungkinkan palet multi-warna, pita, atau simulasi material (logam, mutiara, aurora boreal).

Menumpangkan gradien dan menyiapkan cadangan

Pada shorthand background, urutan penting: lapisan terdepan dulu. Selimut gelap di atas foto ditulis background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Selalu sediakan warna polos sebagai cadangan (background-color) untuk browser yang sangat lama atau selama gambar dimuat.

Praktik terbaik performa

Gradien CSS dihitung ulang setiap kali ukuran berubah: tetap bijak dalam jumlah stop (2 hingga 5 cukup untuk 90% kasus) dan hindari penumpukan ganda di area sangat besar di mobile. Pilih nilai heksadesimal atau HSL yang stabil, dan kunci sudutnya begitu desain disetujui untuk menghindari perbedaan kecil antar browser.

Gradien dengan palet Volade

Untuk membangun palet yang konsisten sebelum mengembangkan gradien, gunakan generator palet dan pemilih warna : temukan warna merek Anda, lalu tempelkan di sini sebagai stop. Hasilnya bisa langsung disalin ke CSS, design system, atau tema Anda — di komputer maupun mobile, tanpa akun dan tanpa pengiriman data.

Satu lisensi, seluruh ekosistem premium Peramban · CMS · Desktop · Seluler · Script · API · Alat · Database
Satu lisensi, semua Beralih ke premium Masuk