Buat gradien CSS secara visual
Gradien menambah kedalaman dan warna pada tombol, bagian hero, kartu, dan latar belakang tanpa memerlukan satu pun file gambar. Namun, menulis kodenya secara manual berarti harus menebak sudut dan persentase, serta memuat ulang halaman berkali-kali. Generator gradien CSS ini memungkinkan Anda mendesain gradien secara visual dengan pratinjau langsung dan menghasilkan kode CSS yang bersih, siap salin, serta berfungsi di semua browser modern.
Fitur
- Tiga jenis gradien: linear, radial (lingkaran atau elips), dan conic.
- Hingga delapan titik warna dengan posisi yang bisa digeser.
- Slider sudut untuk gradien linear dan conic.
- Preset dan tombol acak untuk inspirasi cepat.
- Warna solid cadangan (fallback) disertakan dalam CSS.
- Salin kode hanya dengan satu klik.
Cara menggunakan CSS
Tempelkan kode ke dalam aturan CSS untuk elemen yang ingin Anda desain:
.hero {
background: #0ea5e9;
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}
Gradien dianggap sebagai gambar dalam CSS, jadi Anda juga bisa menggunakannya pada background-image, menumpuk beberapa gradien yang dipisahkan dengan koma, atau menggabungkannya dengan foto: background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); akan menggelapkan gambar sehingga teks putih di atasnya tetap terbaca.
Tips desain
- Gunakan transisi yang halus. Dua warna yang berdekatan (biru ke ungu, oranye ke merah muda) terlihat lebih mulus dan modern daripada warna yang saling berlawanan.
- Periksa kontras. Jika ada teks di atas gradien, pastikan teks tetap terbaca di kedua sisi warna — uji warna dengan Konverter Warna untuk melihat rasio kontrasnya.
- Ambil warna dari gambar merek menggunakan Pemilih Warna Gambar.
- Beri efek kedalaman pada kartu dan tombol menggunakan Generator Box Shadow.