Generator Gradien CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Mengapa menggunakan generator gradien visual?
Menulis gradien CSS secara manual rumit. Generator visual kami memungkinkan kontrol color stop dengan color picker dan slider posisi dengan pembaruan real-time.
3 Jenis Gradien
Gradien linier, radial, dan konik — dengan kontrol khusus untuk setiap jenis
Gradien Multi-warna
Tambahkan color stop tak terbatas dan seret posisi untuk gradien yang kompleks
Pratinjau Real-time
Lihat rendering gradien secara real-time saat Anda menyesuaikan warna, posisi, dan sudut
Buat gradien CSS dalam 3 langkah
Pilih jenis gradien
Pilih gradien linier, radial, atau konik dan sesuaikan sudut atau arah
Sesuaikan color stop
Atur warna setiap stop dengan color picker dan posisi dengan slider
Salin CSS
Klik 'Salin CSS' untuk mendapatkan properti background lengkap untuk digunakan dalam stylesheet
Kasus Penggunaan Gradien CSS
Latar Belakang Hero
Buat latar belakang layar penuh yang memukau dengan gradien diagonal atau radial
Teks Gradien
Terapkan gradien pada teks dengan background-clip:text untuk efek tipografi yang memukau
Border Gradien
Gunakan gradien dengan border-image untuk membuat bingkai berwarna di sekitar elemen
Overlay Gambar
Letakkan gradien di atas gambar untuk overlay gelap yang memastikan keterbacaan teks
Praktik Terbaik Gradien CSS
✓ Gunakan 135deg untuk gradien diagonal
Sudut 135 derajat membuat diagonal klasik dari pojok kiri atas ke kanan bawah.
✓ Jaga gradien tetap halus dalam UI
Dalam elemen UI seperti tombol dan kartu, gunakan gradien yang sangat halus dengan perbedaan kecerahan 10-20% untuk kedalaman.
✓ Atur warna fallback
Tambahkan warna latar belakang solid sebagai fallback: background-color:#6366f1; background:linear-gradient(...).
✓ Animasikan gradien dengan background-position
Gradien CSS tidak dapat dianimasikan secara langsung, namun Anda dapat menganimasikan background-position pada gradien yang lebih besar untuk efek gerakan yang halus.
❓ Pertanyaan yang Sering Diajukan
Apa perbedaan antara gradien linier, radial, dan konik?
Gradien linier bertransisi di sepanjang garis lurus sesuai sudut. Radial memancar dari titik pusat dalam bentuk lingkaran atau elips. Konik berputar di sekitar titik pusat — ideal untuk progress indicator melingkar.
Bagaimana cara membuat gradien transparan?
Gunakan transparent sebagai color stop: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Membuat gradien dari warna semi-transparan ke sepenuhnya transparan — ideal untuk overlay gambar.
Mengapa saya melihat banding di gradien saya?
Banding (garis terlihat antara warna) muncul di layar berkualitas rendah atau saat bertransisi antara hue yang serupa. Tambahkan color stop di tengah untuk memperhalus transisi.
Bisakah gradien digunakan sebagai border?
Ya; gunakan border-image:linear-gradient(...) 1. Alternatifnya, pseudo-element ::before dengan latar belakang gradien dan z-index negatif dapat mensimulasikan gradient border.