Gradient Generator — Buat CSS Linear-Gradient Modern Sekejap
Gradient Generator menghasilkan kode CSS linear-gradient()
dari dua warna dan satu sudut yang Anda pilih. Berguna untuk background
tombol, hero section landing page, badge produk, header sosial media, atau
kartu UI modern. Output siap-tempel ke property background
CSS Anda — tanpa perlu hafal sintaks gradient.
CSS gradient akan muncul...
Cara menggunakan Gradient Generator
Atur Angle (0–360°): 0 = bawah ke atas, 90 = kiri ke kanan, 180 = atas ke bawah.
Pilih warna pertama dan kedua (HEX, RGB, atau HSL).
Klik GENERATE GRADIENT.
Salin kode CSS ke styling Anda.
Tips memilih kombinasi warna
Pilih dua warna dengan jarak hue tidak terlalu jauh untuk gradien halus.
Kombinasi analogous (warna bertetangga di color wheel) terlihat profesional.
Kontras tinggi untuk CTA agar menarik perhatian.
Sertakan brand color sebagai salah satu pole agar konsisten identitas.
Test di gelap dan terang mode untuk readability teks di atasnya.
Kapan tool ini berguna?
Hero section — background dramatis tanpa gambar.
Button CTA — gradien meningkatkan klik 5–15%.
Badge sale — gradien menarik mata.
Avatar placeholder — gradien per user dari hash nama.
Social media banner — Cover LinkedIn, Twitter, GitHub.