Generator Gradien
Buat gradien CSS dengan pratinjau langsung.
Tentang Generator Gradien
Generator Gradien GuruAlpha membuat gradien CSS linier, radial, dan konik dengan pratinjau langsung. Pilih warna, sesuaikan sudut dan arah, susun beberapa titik warna berlapis, dan salin kode CSS yang siap digunakan. Sempurna untuk latar belakang, tombol, bagian hero, dan elemen desain apa pun yang mendapat manfaat dari transisi warna yang halus.
Gradien adalah salah satu tren desain paling populer dalam desain web modern. Gradien menambahkan kedalaman, daya tarik visual, dan kecanggihan pada desain datar tanpa memerlukan gambar. Generator Gradien membuat pembuatan gradien kustom menjadi mudah — pilih warna Anda, sesuaikan sudut, dan lihat hasilnya secara real-time. Kode CSS yang dihasilkan dapat disalin langsung ke lembar gaya Anda.
Alat ini mendukung tiga jenis gradien. Gradien linier mengubah warna di sepanjang garis lurus — jenis yang paling umum, digunakan untuk latar belakang, tombol, dan lapisan. Gradien radial memancar dari titik pusat — bagus untuk efek sorotan dan desain melingkar. Gradien konik berputar di sekitar titik pusat — berguna untuk roda warna dan efek diagram lingkaran.
Editor multi-titik memungkinkan Anda menambah, menghapus, dan memposisikan ulang titik warna di sepanjang garis gradien. Setiap titik dapat diberi warna dan posisi tertentu (0-100%), memberi Anda kontrol yang presisi atas transisi. Pratinjau real-time diperbarui saat Anda menyesuaikan titik, memberikan umpan balik visual langsung.
Format ekspor mencakup CSS biasa (linear-gradient), CSS dengan awalan vendor untuk kompatibilitas browser, variabel Sass/SCSS, properti kustom CSS, dan nilai arbitrer Tailwind. Ini mencakup semua alur kerja pengembangan web modern.
Fitur Utama Generator Gradien
- Jenis gradien: linier, radial, dan konik
- Editor warna multi-titik dengan pemosisian
- Pratinjau langsung secara real-time
- Kontrol sudut dan arah
- Ekspor sebagai CSS, SCSS, variabel CSS, Tailwind
- Generator gradien acak untuk inspirasi
- Kode CSS siap disalin
- Berfungsi di semua perangkat
Cara Menggunakan Generator Gradien
- Buka Generator Gradien di GuruAlpha.
- Pilih jenis gradien: linier, radial, atau konik.
- Klik pada bilah gradien untuk menambahkan titik warna.
- Pilih warna untuk setiap titik menggunakan pemilih warna.
- Sesuaikan sudut (linier) atau bentuk (radial/konik).
- Pratinjau gradien secara real-time pada elemen demo.
- Salin kode CSS yang dihasilkan.
Tips Menggunakan Generator Gradien
- Mulai dengan 2-3 titik warna untuk gradien yang sederhana dan elegan.
- Gunakan generator gradien acak untuk inspirasi.
- Gradien linier pada 135 derajat menciptakan efek diagonal yang populer.
- Gradien radial dengan pusat terang menciptakan efek sorotan.
- Selalu uji gradien di berbagai browser — awalan vendor memastikan kompatibilitas.
Pertanyaan Umum tentang Generator Gradien
Apa perbedaan antara linier, radial, dan konik?
Linier bertransisi di sepanjang garis (arah). Radial memancar dari titik pusat (lingkaran/elips). Konik berputar di sekitar pusat (seperti roda warna).
Bagaimana cara menambahkan lebih banyak titik warna?
Klik di mana saja pada bilah gradien untuk menambahkan titik baru. Seret titik untuk memposisikannya ulang. Klik titik untuk mengubah warnanya.
Apakah kode CSS kompatibel dengan browser?
Ekspor menyertakan awalan vendor (-webkit-, -moz-) untuk kompatibilitas maksimum dengan browser lama.
Bisakah saya menggunakan gradien sebagai warna teks?
Ya. Gunakan background-clip: text dan -webkit-text-fill-color: transparent untuk menerapkan latar belakang gradien pada teks.