Rancang gradien yang indah dan ekspor sebagai CSS atau gambar
Pilih warna, tambahkan perhentian, dan sesuaikan sudut atau titik tengah untuk membuat gradien tepat yang Anda perlukan. Alat ini mendukung gradien linier, radial, dan kerucut dengan penghentian warna tak terbatas. Salin kode CSS untuk stylesheet Anda atau unduh gradien sebagai PNG resolusi tinggi untuk digunakan dalam proyek desain.
Gunakan alat ini gratisFitur
Tiga jenis gradien
Buat gradien linier dengan sudut mana pun, gradien radial dengan pusat dan bentuk yang dapat disesuaikan, atau gradien berbentuk kerucut yang menyapu suatu titik. Beralih di antara jenis dan pembaruan pratinjau secara instan.
Perhentian warna tanpa batas
Tambahkan perhentian warna sebanyak yang Anda perlukan di sepanjang bilah gradien. Seret perhentian untuk mengubah posisinya, klik dua kali untuk mengubah warna, atau klik kanan untuk menghapus. Setiap perhentian mendukung opacity untuk gradien semi-transparan.
Keluaran kode CSS
Alat ini menghasilkan kode gambar latar belakang CSS yang valid dengan awalan vendor. Salin kode dan tempel langsung ke stylesheet Anda. Outputnya diperbarui secara real time saat Anda mengedit gradien.
Ekspor gambar PNG
Unduh gradien sebagai PNG pada resolusi apa pun — mulai dari thumbnail 100 px hingga spanduk 4000 px. Gunakan gambar sebagai latar belakang, hamparan, atau elemen desain pada alat yang tidak mendukung gradien CSS.
Cara menggunakan
Pilih jenis gradien
Pilih linier, radial, atau kerucut. Untuk linier, atur sudutnya; untuk radial, atur titik pusat dan bentuknya.
Tambahkan dan sesuaikan warna
Klik bilah gradien untuk menambahkan perhentian warna. Seret untuk mengubah posisinya, klik dua kali untuk mengubah warna, dan sesuaikan opacity untuk setiap perhentian.
Salin CSS atau unduh
Salin kode CSS yang dihasilkan untuk penggunaan web, atau atur resolusi dan unduh gradien sebagai gambar PNG.
Spesifikasi
| Jenis gradien | Linier, radial, kerucut |
| Warna berhenti | Tak terbatas |
| Rentang sudut | 0–360° |
| keluaran CSS | Awalan standar + vendor |
| Ekspor PNG | Hingga 4000 × 4000 piksel |
| Pengolahan | Sisi klien (instan) |
Related Magic Eraser Tools
Pertanyaan umum
Bisakah saya membuat gradien dengan transparansi?
+
Ya. Setiap perhentian warna memiliki penggeser opacity. Atur opacity di bawah 100% untuk membuat area semi-transparan di gradien. Keluaran CSS menggunakan nilai rgba dan ekspor PNG mempertahankan saluran alfa.
Apa itu gradien berbentuk kerucut?
+
Gradien berbentuk kerucut memancarkan warna berhenti di sekitar titik pusat, seperti sapuan jarum jam. Ini berguna untuk efek gaya diagram lingkaran, roda warna, dan latar belakang dekoratif. Dukungan browser sangat baik di browser modern.
Bisakah saya menggunakan CSS yang dihasilkan dalam kerangka apa pun?
+
Ya. Outputnya adalah CSS standar yang berfungsi dalam HTML biasa, React, Vue, Tailwind, dan kerangka kerja lainnya yang mendukung CSS berbasis inline atau stylesheet.
Butuh gradien pada foto?
AI Enhance dapat menyesuaikan nada warna dan pencahayaan foto Anda, dan Alat Hamparan Gambar kami memungkinkan Anda memadukan gradien di atas gambar apa pun untuk tampilan yang lebih halus.
Cobalah secara gratisMore free tools
Explore our other limited free edits after sign-in photo and image tools.
Ubah ukuran gambar ke dimensi piksel yang tepat untuk media sosial, web, dan media cetak. Tidak perlu mendaftar. Mendukung JPEG, PNG, dan WebP hingga 50 MB.
Kompres gambar JPEG, PNG, dan WebP hingga 80% dengan penurunan kualitas minimal. Sesuaikan penggeser kualitas untuk kontrol penuh. Tidak perlu mendaftar.
Konversikan gambar PNG ke format JPEG secara instan. Sesuaikan kualitas keluaran, pilih warna latar belakang untuk area transparan, dan unduh — tidak perlu mendaftar.
Konversikan gambar JPEG ke format PNG untuk kualitas lossless dan dukungan transparansi. Ideal sebelum penghapusan latar belakang. Tidak perlu mendaftar atau menginstal.
Konversikan foto Apple HEIC dan HEIF ke format JPEG yang kompatibel secara universal. Berfungsi di browser — tanpa pemasangan aplikasi, tanpa pendaftaran, tanpa pengunggahan file ke server.
Konversikan JPEG dan PNG ke WebP untuk memuat halaman lebih cepat, atau konversikan WebP kembali ke JPEG/PNG untuk kompatibilitas. Tanpa registrasi, tanpa instalasi, berjalan di browser.