Cara menggunakan Generator Gradient CSS
- Pilih preset atau mulai dari gradient bawaan.
- Pilih Linear, Radial atau Conic, lalu atur sudut, bentuk, atau posisinya.
- Edit titik warna: klik bar untuk menambah titik, geser handle untuk memindahkannya, dan ketik warna serta posisi yang tepat di daftar.
- Opsional, pilih interpolasi OKLab/OKLCH agar peralihan warna lebih halus, lalu klik Salin CSS.
Apa itu gradient CSS?
Gradient CSS adalah gambar yang dibuat oleh browser dan menampilkan peralihan dari dua atau lebih warna. Karena berupa <image>, kamu menggunakannya di background, background-image, border-image atau mask-image — bukan di background-color. Gradient tidak memerlukan HTTP request, tetap tajam di ukuran berapa pun, dan bisa dianimasikan atau ditumpuk.
Gradient linear, radial dan conic
| Jenis | Contoh | Penggunaan umum |
|---|---|---|
| Linear | linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%) | Background hero, tombol, overlay gambar |
| Radial | radial-gradient(circle at top, #fff 0%, #312e81 100%) | Efek sorotan, glow, vignette |
| Conic | conic-gradient(from 0deg at center, red, yellow, lime, aqua, blue, magenta, red) | Roda warna, diagram lingkaran, loader |
Pada gradient linear, 0deg mengarah ke atas dan 90deg mengarah ke kanan (sama dengan to right). Sudut conic dimulai dari atas dan berputar searah jarum jam.
Titik warna dan tepi tegas
Setiap titik berisi warna plus posisi opsional. Jika dua titik memiliki posisi yang sama, peralihannya menjadi tepi tegas — begitulah cara membuat garis-garis atau preset Diagram lingkaran: #4f46e5 0% 40%, #22c55e 40% 75%. Untuk membuat konten memudar ke halaman, akhiri dengan versi transparan dari warna yang sama (misalnya #00000000), agar tidak muncul pita abu-abu yang kotor.
Gradient lebih halus dengan OKLab dan OKLCH
Secara default, browser melakukan interpolasi di sRGB, sehingga biru → kuning melewati abu-abu yang suram. CSS Color 4 memungkinkan kamu memilih ruang warna: linear-gradient(90deg in oklab, blue, yellow) tetap cerah dan rata, dan in oklch berjalan mengelilingi roda rona. Generator ini menghasilkan deklarasi sRGB biasa lebih dulu, lalu versi interpolasi di baris kedua, sehingga browser yang tidak memahami sintaks tersebut cukup mengabaikan baris terakhir.
Menggunakan gradient di Webflow
Panel Style di Webflow sudah punya editor gradient linear dan radial di bagian Backgrounds — salin sudut dan warna titik dari alat ini ke sana. Untuk hal yang tidak tersedia di panel, seperti gradient conic atau interpolasi in oklch, tempel CSS-nya ke blok <style> di elemen Embed atau custom code halaman, lalu targetkan class kamu. Butuh bayangan yang serasi? Coba Box Shadow Generator, atau cek teks di atas gradient kamu dengan Contrast Checker.
Juga dicari sebagai: css gradient generator, linear-gradient, radial-gradient, conic-gradient, background gradient css, pembuat gradasi warna css, gradient oklch, gradient maker online.
Tool yang cocok dipakai bersama Generator Gradient CSS
- Generator Pola SVG — Beri tekstur halus pada section dan card dengan pola SVG mulus: titik, grid, garis diagonal, zigzag, gelombang, tanda plus, papan catur, lingkaran, segitiga, dan lainnya.
- Konverter Warna — Tempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung dapatkan format lainnya, plus palet siap pakai 50–950.
- Konverter SVG ke CSS — Tempel SVG dan dapatkan data URI ter-URL-encode yang ringkas, plus CSS background-image dan mask-image yang bisa diubah warnanya, siap pakai.
- Generator OG Image — Buat gambar preview tautan yang rapi untuk Facebook, LinkedIn, X, Slack, dan WhatsApp dalam hitungan detik.
Pertanyaan yang sering diajukan
Bagaimana cara membuat gradient transparan?
linear-gradient(180deg, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0)). Memudar ke warna yang sama dengan alpha nol menghindari pita abu-abu yang bisa muncul dengan kata kunci transparent di browser lama.Kenapa gradient saya terlihat kotor atau abu-abu di tengah?
Bisakah saya memberi gradient pada teks?
background-clip: text; -webkit-background-clip: text; color: transparent;. Simpan color solid sebagai fallback agar tetap terbaca, dan cek kontras terhadap halaman.Kenapa CSS menyertakan warna background solid di awal?
Bagaimana cara menganimasikan gradient CSS?
background-position pada gradient yang dibuat lebih besar, atau mendaftarkan custom property dengan @property lalu menganimasikan warna titik atau sudutnya.