Generator Gradient CSS
Generator gradient CSS ini membantu Anda mendesain gradient linear, radial, dan conic secara visual lalu menyalin kode CSS siap pakai hanya dengan sekali klik. Seret titik warna, atur sudut, dan setel opasitas sementara pratinjau langsung diperbarui seketika, jadi Anda tak perlu lagi menulis sintaks gradient secara manual.
Alat ini dirancang untuk developer front-end dan desainer yang ingin background gradient cepat, perpaduan banyak warna, atau efek pudar transparan tanpa menghafal aturan linear-gradient(), radial-gradient(), dan conic-gradient(). Mulai dari preset pilihan atau bangun sendiri dari nol.
Cara Menggunakan Generator Gradient CSS
Pilih tipe gradient
Pilih Linear untuk perpaduan garis lurus, Radial untuk perpaduan melingkar atau elips, atau Conic untuk rotasi menyapu mengelilingi satu titik pusat.
Tambah dan atur titik warna
Klik bar gradient untuk menambah titik, seret handle untuk memindahkannya, atau seret keluar bar untuk menghapusnya. Atur Warna, Posisi, dan Opasitas tiap titik secara inline atau di editor titik.
Atur arah dan bentuk
Untuk linear, atur sudut dengan knob, input, atau grid 8 arah. Untuk radial, pilih lingkaran atau elips dan posisi pusat pada grid 3x3. Untuk conic, atur sudut awal dan titik pusat.
Salin CSS Anda
Saat pratinjau sudah pas, klik Salin CSS untuk mengambil aturan background lengkap dan menempelkannya langsung ke stylesheet Anda.
Fitur
Tiga Tipe Gradient
Buat gradient linear, radial, dan conic, masing-masing dengan kontrol arah, bentuk, dan posisinya sendiri.
Titik Warna Visual
Klik bar gradient untuk menambah titik, seret untuk memindahkan, atau seret keluar untuk menghapus dengan respons seketika.
Knob Sudut & Grid Arah
Atur sudut linear dari 0° hingga 360° dengan menyeret knob, mengetik nilai, atau memakai grid cepat 8 arah.
Bentuk & Posisi Radial
Beralih antara lingkaran dan elips serta tempatkan titik asal dengan grid sembilan posisi 3x3 untuk kontrol presisi.
Opasitas per Titik
Turunkan opasitas pada titik mana pun dan output otomatis beralih ke RGBA, siap untuk efek pudar transparan.
Output CSS Bersorot
Baca CSS gradient yang rapi dan berkode warna lalu salin seluruh aturan background ke clipboard hanya dengan sekali klik.
Urungkan & Ulangi
Maju dan mundur menelusuri perubahan Anda dengan tombol atau pintasan Ctrl+Z dan Ctrl+Y.
Acak & Balik
Hasilkan gradient acak baru untuk inspirasi, atau balikkan arah titik Anda saat ini secara seketika.
46 Preset Pilihan
Mulai dari galeri berisi 46 gradient pilihan tangan yang ditata per keluarga warna, lalu sesuaikan sesuai selera.
Output Standar & Privat
Menghasilkan sintaks gradient CSS standar yang berjalan di browser modern, semuanya dibuat secara lokal di browser Anda.
Pertanyaan yang Sering Diajukan
Bagaimana cara membuat gradient CSS?
Pilih tipe gradient, tambahkan titik warna dengan mengklik bar gradient, lalu atur sudut, posisi, dan opasitas sampai pratinjau langsung terlihat pas. Klik Salin CSS untuk menyalin aturan background yang sudah jadi ke stylesheet Anda.
Apa perbedaan gradient linear, radial, dan conic?
Gradient Linear memadukan warna di sepanjang garis lurus pada sudut yang dipilih. Gradient Radial memadukan warna keluar dari titik pusat dalam bentuk lingkaran atau elips. Gradient Conic menyapu warna dalam rotasi mengelilingi titik pusat, seperti diagram lingkaran atau roda warna.
Bagaimana membuat gradient CSS 3 warna (atau banyak warna)?
Klik di mana saja pada bar gradient untuk menambah titik lain; titik baru akan berbaur dengan warna di sekitarnya. Ulangi untuk menambah sebanyak titik yang Anda butuhkan, lalu seret tiap titik untuk mengatur posisinya. Sebuah gradient harus tetap memiliki minimal dua titik warna.
Bagaimana cara membuat gradient transparan di CSS?
Turunkan Opasitas pada titik mana pun di editor titik. Titik dengan opasitas di bawah 100% dihasilkan sebagai nilai warna RGBA, dan pola papan catur pada pratinjau menunjukkan dengan tepat di mana gradient menjadi transparan.
Bagaimana cara menghapus titik warna?
Seret handle titik keluar dari bar gradient untuk menghapusnya, atau gunakan kontrol hapus di editor titik. Gradient selalu mempertahankan minimal dua titik, jadi Anda tidak bisa menghapus dua titik terakhir.
Bisakah saya menyalin kode CSS gradient yang dihasilkan?
Bisa. Panel CSS menampilkan aturan background bersorot sintaks, dan tombol Salin CSS menyalin seluruh deklarasi ke clipboard Anda sehingga bisa langsung ditempel ke stylesheet.
Apakah gradient yang dihasilkan kompatibel dengan semua browser?
Output menggunakan sintaks gradient CSS standar yang didukung versi terbaru Chrome, Firefox, Safari, dan Edge, tanpa perlu prefix vendor.
Apakah data gradient saya disimpan di suatu tempat?
Tidak. Setiap gradient dibuat sepenuhnya di browser Anda. Tidak ada yang dikirim ke server, dan warna serta desain Anda tidak disimpan atau dilacak.
Belum ada komentar. Jadilah yang pertama berkomentar!