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 gratisBrowser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
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.
Fitur
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.
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai EnhanceSpesifikasi
| 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.
Konversi warna antara format bernama HEX, RGB, HSL, HSB, CMYK, dan CSS. Lihat pratinjau langsung, salin nilai apa pun, dan ekspor kartu warna. Tidak perlu mendaftar.
Ubah kode warna HEX menjadi nilai RGB dan sebaliknya. Pratinjau langsung, salinan sekali klik, dan keluaran cuplikan CSS. Tidak perlu mendaftar — berfungsi di browser Anda.
Pilih warna apa pun dari gambar yang diunggah dan dapatkan kode HEX, RGB, dan HSL secara instan. Buat palet dari foto untuk desain web, pencitraan merek, dan ilustrasi.
Upload foto dan ekstrak 5-10 warna dominan dengan kode HEX, RGB, dan HSL. Salin contoh, ekspor sebagai variabel ASE atau CSS. Tidak perlu mendaftar.
Hasilkan kode QR untuk URL, teks, kredensial WiFi, dan vCard. Sesuaikan warna, tambahkan logo tengah, dan unduh sebagai PNG atau SVG. Tidak perlu mendaftar.
Hitung lebar, tinggi, atau rasio aspek untuk gambar dan video. Masukkan dua nilai apa pun dan dapatkan nilai ketiga. Rasio preset untuk media sosial, film, dan media cetak. Tidak perlu mendaftar.