Generator CSS Gradient
Apa yang dilakukan alat ini
Pilih tipe gradient (Linear, Radial, atau Conic), sesuaikan sudut atau bentuk, tambahkan color stop dan seret posisinya, lalu salin CSS siap pakai. Pratinjau diperbarui langsung saat Anda mengedit. Klik swatch preset untuk menerapkannya sebagai titik awal.
Cara penggunaan
- Pilih tipe gradient: Linear, Radial, atau Conic.
- Sesuaikan sudut (untuk Linear/Conic) atau bentuk (untuk Radial).
- Klik swatch warna untuk mengubah warna, atau ketik nilai HEX.
- Seret slider posisi untuk mengontrol di mana setiap warna jatuh.
- Klik Salin untuk menyalin kode CSS.
Pertanyaan yang Sering Diajukan
Apa itu linear gradient?
Linear gradient mengubah warna secara bertahap di sepanjang garis lurus dengan sudut tertentu. Gunakan `linear-gradient(135deg, #color1, #color2)` di CSS. Sudut menentukan arah: 0° dari bawah ke atas, 90° dari kiri ke kanan, 135° diagonal.
Apa itu radial gradient?
Radial gradient memancarkan warna dari titik tengah ke luar dalam bentuk lingkaran atau elips. Gunakan `radial-gradient(circle, #color1, #color2)` di CSS. Biasa dipakai untuk efek sorotan dan cahaya.
Apa itu conic gradient?
Conic gradient mengubah warna mengelilingi titik pusat, seperti roda warna. Gunakan `conic-gradient(from 0deg, #color1, #color2)` di CSS. Berguna untuk diagram lingkaran dan efek spinner.
Berapa banyak color stop yang bisa ditambahkan?
Generator ini mendukung hingga 8 color stop. Setiap stop punya warna dan posisi (0–100%). Geser slider posisi untuk mengatur titik mulai setiap warna di gradien.
Apakah gradien CSS berfungsi di semua browser?
Ya. Linear, radial, dan conic gradient didukung semua browser modern. Generator juga menghasilkan background-color cadangan (warna stop pertama) untuk browser sangat lama yang tidak mendukung gradien.