Lewati ke konten utama
iotools.cloudiotools.cloud

Pembuat Mesh Gradien CSS

Buat gradien mesh berwarna-warni lembut dari empat warna sudut yang berlapis sebagai radial-gradient di atas warna dasar — dengan kontrol ukuran blend, falloff, dan overlay butir opsional (atau dalam format SVG).

Input

Warna Sudut

Warna latar belakang yang ditampilkan di balik mesh.

Pengaturan Mesh

Nilai yang lebih besar menghasilkan blob yang lebih lembut dan menyebar.

Tempat setiap warna memudar menjadi transparan (lebih rendah = tepi lebih tajam).

Format Keluaran

Output

Kode yang Dihasilkan
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-gradient-mesh-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "colorTopLeft": "#ff6b6b",
    "colorTopRight": "#feca57",
    "colorBottomLeft": "#48dbfb",
    "colorBottomRight": "#5f27cd",
    "colorBase": "#1a1a2e",
    "blendSize": "60",
    "falloff": "50",
    "enableGrain": "",
    "grainIntensity": "25",
    "outputFormat": "css"
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-gradient-mesh-generator` tool (CSS Gradient Mesh Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-gradient-mesh-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Pembuat Mesh Gradien CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Apa itu mesh gradien?

Mesh gradien (juga disebut "gradient mesh" atau "blob gradient") adalah latar belakang multi-warna lembut yang dibuat dengan memadukan beberapa titik warna bersama-sama daripada satu fade lurus atau radial saja. Ketika CSS normal linear-gradient atau radial-gradient bergerak lancar hanya antara dua atau tiga stop sepanjang satu sumbu, mesh gradien menyebarkan warna ke seluruh kotak — tampilan yang dipopulerkan oleh alat seperti halaman pemasaran Stripe, Mesher, dan latar belakang "aurora" atau "blob" yang tak terhitung jumlahnya.

Alat ini membangun efek dengan CSS murni: empat warna berbeda, satu berlabuh di setiap sudut (kiri atas, kanan atas, kiri bawah, kanan bawah), masing-masing dirender sebagai layer radial-gradient() sendiri. Menumpuk keempat layer sebagai background-image yang dipisahkan koma di atas warna dasar padat menghasilkan blend yang lembut dan penuh kesan — tanpa gambar, kanvas, atau JavaScript yang diperlukan saat runtime.

Cara menggunakan alat ini

  1. Pilih warna untuk masing-masing dari empat Warna Sudut — Kiri Atas, Kanan Atas, Kiri Bawah, Kanan Bawah — ditambah warna Dasar yang terlihat di mana blob sudut tidak menjangkau.
  2. Sesuaikan Ukuran Blend % untuk mengontrol seberapa jauh setiap warna menyebar sebelum memudar menjadi transparan — nilai yang lebih besar menciptakan blob yang lebih besar, lebih lembut, dan lebih banyak tumpang tindih.
  3. Sesuaikan Falloff % untuk mengontrol seberapa cepat setiap blob memudar — nilai yang lebih rendah memberikan titik warna yang lebih tajam dan terkonsentrasi; nilai yang lebih tinggi menyebarkan warna lebih secara bertahap.
  4. Secara opsional aktifkan Tambahkan Overlay Butir dan atur intensitasnya untuk mendapatkan resep noise-texture siap pakai (filter SVG feTurbulence inline) untuk berlapis di atas — sentuhan populer di bagian hero mesh-gradient modern yang mencegah campuran warna rata dari terlihat terlalu bersih/berband.
  5. Pilih Format Output: CSS memberikan Anda deklarasi background-color + background-image berlapis yang dapat langsung ditempel ke stylesheet; SVG memberikan Anda <svg> mandiri dengan empat def <radialGradient>, berguna ketika Anda memerlukan mesh sebagai aset gambar daripada latar belakang CSS langsung.
  6. Salin kode yang dihasilkan, atau unduh, dan letakkan di proyek Anda.

Output diperbarui secara instan saat Anda menyesuaikan kontrol apa pun — tidak ada langkah "generate" terpisah.

Mengapa empat sudut?

Empat blob yang berlabuh di sudut adalah pengaturan paling sederhana yang masih terlihat seperti "mesh" sejati daripada satu blob atau fade diagonal dua warna — setiap sudut kotak mendapat warna sendiri, dan tengah menjadi zona blend alami. Ini juga menjaga CSS yang dihasilkan tetap pendek: empat layer radial-gradient(), tidak ada markup ekstra, tidak ada matematika positioning yang perlu dipertahankan.

FAQ

Apakah ini akan bekerja di setiap browser? Ya. Latar belakang radial-gradient() berlapis dan nilai background-image yang dipisahkan koma telah didukung di semua browser utama selama bertahun-tahun — tidak diperlukan awalan vendor.

Bisakah saya menggunakan lebih dari empat warna? Tidak dengan alat ini — ini dibangun di sekitar kasus empat sudut, yang mencakup sebagian besar kasus penggunaan mesh-gradient sambil tetap mudah dibaca dan diedit dengan tangan. Untuk mesh gradien, Anda masih dapat menyesuaikan salah satu dari empat warna sesuai selera.

Apa perbedaan antara output CSS dan SVG? Output CSS adalah deklarasi background yang dimaksudkan untuk ditempel langsung ke stylesheet atau atribut style — ini dirender sebagai latar belakang langsung yang independen resolusi. Output SVG adalah gambar mandiri (elemen <svg> dengan definisi gradien radial) — gunakan ketika Anda memerlukan mesh gradien sebagai file atau gambar yang disematkan daripada latar belakang CSS.

Mengapa overlay butir saya adalah blok CSS terpisah daripada dipanggang ke dalam latar belakang? Butir bekerja paling baik sebagai mix-blend-mode: overlay pada elemen anak yang diposisikan duduk di atas mesh, jadi noise berpadu ke warna di bawahnya daripada menggantinya. Alat ini menampilkan aturan .mesh-grain siap pakai (dengan noise yang sudah dikodekan sebagai URI data SVG inline) — tambahkan elemen anak dengan kelas itu di dalam wadah gradien Anda.

Privasi

Semuanya terjadi di browser Anda. Warna dan pengaturan pilihan Anda tidak pernah dikirim ke server — CSS atau SVG dihasilkan dan diperbarui secara lokal saat Anda menyesuaikan kontrol.

cssgradientmesh gradientbackgroundgeneratorsvgweb design

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan