Pembangun CSS Gradient
Susun gradient linear dan radial CSS secara visual. Edit color stop, salin CSS siap-tempel.
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, bukanbackground-color. Gradient itu image, bukan warna.background-colorakan 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-imagememicu paint di tiap frame — animatetransformdi 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.