Membuat background section hero atau call-to-action tanpa membakar gambar. Membuat hover state tombol atau card yang tampak "modern" tanpa aset gambar. Mockup overlay warna brand (gradient + solid low-opacity untuk keterbacaan teks). Menghasilkan divider dekoratif, background gaya mesh, atau fill SVG animated.

Linear — warna bertransisi sepanjang garis lurus di angle yang dipilih (0° = bawah ke atas, 90° = kiri ke kanan, 180° = atas ke bawah). Radial — warna menyebar keluar dari titik tengah sebagai lingkaran atau elips. Cocok untuk efek spotlight atau vignette.

Pakai sebagai background , bukan background-color . Gradient itu image, bukan warna. background-color akan diabaikan. Stop harus urut untuk rendering yang predictable. Tool ini auto-sort — kalau kamu copy CSS dan edit manual, jaga persentasenya monotonic. Hard stop (dua stop di persentase yang sama) menghasilkan batas tajam alih-alih fade — berguna untuk efek stripe atau band. Banding di area besar. Gradient panjang dengan kontras rendah bisa menampilkan "band" yang terlihat di layar 8-bit. Tambahkan SVG noise overlay kecil ( filter: url(#noise) ) atau geser stop sedikit. Performance. Browser meng-paint gradient dengan cepat, tapi meng-animate background-image memicu paint di tiap frame — animate transform di layer di atasnya sebagai gantinya. Aksesibilitas. Kalau ada teks di atas gradient, cek rasio kontras terhadap titik terburuk sepanjang gradient di mana teks muncul, bukan rata-rata.

Pembangun CSS Gradient

Susun gradient linear dan radial CSS secara visual. Edit color stop, salin CSS siap-tempel.

Tipe

Angle 90°

Color stops

Preview

CSS

Dibuat oleh JXXR1 · ♥ Jadi sponsor · ☕ Belikan saya kopi

Untuk apa ini?

CSS gradient adalah satu baris CSS yang menggambar transisi warna mulus untuk background, tombol, panel hero, dan overlay tanpa aset gambar apa pun. Sintaksisnya kuat tapi ribet ditulis manual: angle, persen stop, varian repeating, mencampur linear dengan radial. Tool ini menyediakan builder visual yang mencerminkan CSS real-time, jadi kamu bisa men-drag stop ke posisinya dan menyalin string linear-gradient(...) atau radial-gradient(...) yang lengkap.

Kapan digunakan

Membuat background section hero atau call-to-action tanpa membakar gambar.
Membuat hover state tombol atau card yang tampak "modern" tanpa aset gambar.
Mockup overlay warna brand (gradient + solid low-opacity untuk keterbacaan teks).
Menghasilkan divider dekoratif, background gaya mesh, atau fill SVG animated.

Linear vs radial

Linear — warna bertransisi sepanjang garis lurus di angle yang dipilih (0° = bawah ke atas, 90° = kiri ke kanan, 180° = atas ke bawah).
Radial — warna menyebar keluar dari titik tengah sebagai lingkaran atau elips. Cocok untuk efek spotlight atau vignette.

Kesalahan umum

Pakai sebagai background, bukan background-color. Gradient itu image, bukan warna. background-color akan diabaikan.
Stop harus urut untuk rendering yang predictable. Tool ini auto-sort — kalau kamu copy CSS dan edit manual, jaga persentasenya monotonic.
Hard stop (dua stop di persentase yang sama) menghasilkan batas tajam alih-alih fade — berguna untuk efek stripe atau band.
Banding di area besar. Gradient panjang dengan kontras rendah bisa menampilkan "band" yang terlihat di layar 8-bit. Tambahkan SVG noise overlay kecil (filter: url(#noise)) atau geser stop sedikit.
Performance. Browser meng-paint gradient dengan cepat, tapi meng-animate background-image memicu paint di tiap frame — animate transform di layer di atasnya sebagai gantinya.
Aksesibilitas. Kalau ada teks di atas gradient, cek rasio kontras terhadap titik terburuk sepanjang gradient di mana teks muncul, bukan rata-rata.