Pengembangan Web
CSS Gradient Generator
Menyusun gradien linear, radial, atau konik dari beberapa warna dan mendapatkan CSS siap pakai.
0° — di atas, lalu searah jarum jam.
A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.
How to use it
- Add color stops and drag them to fine-tune where each transition happens.
- Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
- Copy the finished CSS with one click and paste it into background or background-image.
Common uses
- Picking a background for a hero section or button without opening a graphics editor.
- Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
- Quickly experimenting with color transitions before locking a choice into a design system.
Things to keep in mind
A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.
Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.
Artikel tentang alat ini: Gradien CSS: perbedaan linear dari radial dan conic
Pertanyaan yang sering diajukan
Apa perbedaan antara gradien linear, radial, dan konik?
Gradien linear bertransisi sepanjang garis lurus pada sudut yang dipilih, gradien radial menyebar keluar dari titik pusat sebagai lingkaran atau elips, dan gradien konik menyapu warna di sekitar titik pusat seperti roda warna.
Apakah gradien konik didukung di semua browser?
Semua browser utama saat ini mendukung gradien konik, tetapi ini adalah fitur CSS yang lebih baru daripada gradien linear atau radial, jadi versi browser yang sangat lama mungkin tidak merendernya.
Apa yang saya dapatkan sebagai output?
Alat ini menghasilkan sintaks CSS background siap pakai dengan warna, stop, dan posisi pilihan Anda, yang bisa Anda tempel langsung ke stylesheet Anda.
Apa perbedaan repeating-linear-gradient dengan linear-gradient biasa?
linear-gradient biasa merentangkan urutan warnanya tepat sekali ke seluruh elemen, sementara repeating-linear-gradient mengulang urutan color stops yang sama secara siklis, menghasilkan latar belakang bergaris atau berpola.
Bisakah saya menumpuk beberapa gradien sebagai latar belakang?
Ya, properti background-image menerima daftar gradien yang dipisahkan koma, dan gradien-gradien itu bertumpuk berlapis dengan cara yang sama seperti beberapa gambar latar belakang — gradien pertama dalam daftar berada paling atas.