Generator Gradien CSS
Apa itu Gradien CSS?
Gradien CSS memungkinkan Anda menampilkan transisi halus antara dua warna atau lebih tanpa menggunakan file gambar. Terdapat tiga jenis: linear-gradient (sepanjang garis lurus), radial-gradient (memancar dari titik pusat), dan conic-gradient (berputar di sekitar titik pusat). Gradien digunakan untuk latar belakang, tombol, lapisan, dan elemen dekoratif.
Cara Menggunakan Generator Gradien CSS
-
Pilih preset dari swatch atau konfigurasikan gradien Anda sendiri.
-
Pilih jenis gradien: linear, radial, atau conic.
-
Sesuaikan sudut (untuk linear/conic) atau bentuk (untuk radial).
-
Edit titik warna — ubah warna dan posisi (0–100%).
-
Tambah atau hapus titik warna sesuai kebutuhan.
-
Salin CSS dan tempel ke stylesheet Anda.
Pertanyaan yang Sering Diajukan
Bagaimana cara membuat gradien transparan? Gunakan nilai warna rgba() atau hsla() dengan saluran alfa 0 untuk transparansi penuh. Misalnya, titik warna rgba(0,0,0,0) adalah hitam sepenuhnya transparan, berguna untuk overlay fade-out pada gambar.
Bagaimana cara membuat penghentian warna keras (tanpa transisi)? Tempatkan dua titik warna pada posisi yang sama — satu berakhir dan satu dimulai pada titik tersebut. Misalnya, merah 50%, biru 50% menciptakan perubahan instan dari merah ke biru di titik tengah tanpa transisi gradien.
Browser mana yang mendukung gradien konik? Gradien konik didukung di semua browser modern (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Tidak didukung di Internet Explorer.
Bisakah saya menggunakan beberapa gradien pada elemen yang sama? Ya. Latar belakang CSS menerima daftar lapisan yang dipisahkan koma. Anda dapat menumpuk gradien, menggabungkannya dengan gambar latar belakang, dan mengontrol posisi dan ukuran setiap lapisan secara independen.
Keywords: generator gradien CSS, gradien linier, gradien radial, gradien konik, generator latar belakang CSS, pemilih warna gradien, alat gradien CSS