Generator Gradien CSS
Rancang gradien linear dan radial secara visual, lalu salin CSS siap pakai. Semuanya diperbarui langsung di peramban Anda.
Cara membuat gradien CSS
- Pilih linear atau radial, lalu atur sudut untuk gradien linear.
- Pilih warna untuk titik Anda dan atur setiap posisi dari 0 hingga 100.
- Tambah atau hapus titik untuk membentuk transisi sesuka Anda.
- Salin CSS yang dihasilkan ke stylesheet atau atribut style Anda.
FAQ
Apa itu gradien linear?
Gradien linear membaurkan warna sepanjang garis lurus pada sudut yang Anda pilih, dari 0 hingga 360 derajat.
Apa itu gradien radial?
Gradien radial membaurkan warna keluar dari titik tengah dalam bentuk lingkaran atau elips.
Apa arti angka posisi?
Setiap posisi adalah persentase sepanjang gradien, dari 0% di awal hingga 100% di akhir. Titik diurutkan berdasarkan posisi secara otomatis.
Apakah gradien berfungsi di semua peramban?
Ya. CSS yang dihasilkan menggunakan fungsi linear-gradient dan radial-gradient standar yang didukung setiap peramban modern.
Alat Terkait
Mengapa menggunakan generator gradien?
Gunakan Generator Gradien CSS untuk merancang transisi warna yang halus secara visual alih-alih menebak nilai dalam kode, dan salin CSS siap produksi secara instan.
- Lihat gradien berubah langsung saat Anda menyesuaikan warna, sudut, dan titik.
- Salin CSS yang tepat dan valid tanpa mencari kesalahan sintaks.
- Bangun latar multi-titik untuk tombol, spanduk, dan bagian dalam hitungan detik.
Tips dan Batasan
Anda bisa menambah titik warna sebanyak yang Anda suka, dan generator selalu menyisakan setidaknya dua titik agar gradien selalu valid. Titik diurutkan berdasarkan posisi sebelum CSS dihasilkan.