Apa itu Generator Gradien Mesh?

Buat gradien mesh multi-warna untuk latar belakang situs web, grafis media sosial, dan desain UI. Pilih warna, atur posisi titik kontrol, dan dapatkan gradien organik yang melampaui pola linear atau radial biasa.

Kanvas menumpuk beberapa gradien radial, satu untuk tiap titik kontrol. Seret sebuah titik untuk membentuk ulang campuran, ganti warnanya lewat sampel, dan kode diperbarui secara langsung. Hingga enam titik menjaga hasil tetap seimbang. Ekspor sebagai PNG atau SVG dalam ukuran banner seperti 1920x1080, tempel SVG langsung ke Figma, atau ambil kode sebagai CSS, SCSS, atau Tailwind.

Cara menggunakan

1. Pilih warna dasar dengan mengklik swatch warna atau memasukkan nilai hex. Tambahkan hingga 6 titik kontrol warna.
2. Seret titik kontrol di kanvas untuk mengubah arah aliran gradien.
3. Salin kode sebagai CSS, SCSS, atau Tailwind, atau unduh gradien sebagai PNG atau SVG.

Kapan menggunakan

• Membuat latar belakang hero yang tidak terasa seperti template generik.
• Merancang artwork kartu produk atau cover playlist yang butuh warna tanpa foto.
• Menyiapkan latar belakang untuk layar pemuatan dan empty state aplikasi.

Hasil

Seorang desainer UI membuat gradien mesh ungu-ke-teal dengan 4 titik kontrol untuk bagian hero halaman landing, lalu menyalin CSS-nya untuk langsung ditempel ke stylesheet.

FAQ

Apa beda mesh gradient dengan gradien linear?

Gradien linear mencampur dua warna di satu sumbu. Mesh gradient menumpuk beberapa bercak warna lembut, jadi hasilnya lebih mirip sapuan cat air daripada transisi rapi. Batas antarwarna pun lebih sulit terlihat.

Kenapa CSS-nya pakai radial-gradient, bukan conic-gradient?

Radial-gradient yang ditumpuk punya dukungan browser paling luas dan jatuhnya rapi. Generator memunculkan satu radial-gradient per titik kontrol dan menumpuknya lewat background-image, sehingga berjalan di semua browser modern tanpa polyfill.

Apakah mesh gradient saya tampil sama di Safari dan Chrome?

Ya. Outputnya memakai radial-gradient CSS standar tanpa prefiks vendor. Safari, Chrome, Firefox, dan Edge menggambar hasil identik. Browser sangat lama jatuh ke warna pertama saja.

Berapa titik kontrol maksimum yang boleh saya pakai?

Hingga enam. Menambah lebih banyak biasanya membuat campurannya keruh, bukan kaya. Dua atau tiga titik menghasilkan gradien gaya grafis yang bersih, empat sampai enam memberi sapuan lebih mirip cat air.

Bisakah gradien diekspor sebagai SVG?

Ya. Ekspor SVG menyusun gradien dari lapisan radial-gradient yang ditumpuk, jadi tampil di mana pun gradien CSS berfungsi dan langsung bisa ditempel ke Figma sebagai isian bentuk. Gradien mesh SVG yang benar sesuai spesifikasi masih belum didukung di mana pun, sehingga pendekatan bertumpuk inilah versi yang benar-benar berfungsi di mana pun Anda menempelkannya.

Alat terkait