Bantuan

Mesh gradient generator untuk CSS dan SVG

Pilih 2 sampai 8 warna, lalu mesh gradient generator ini memadukannya menjadi latar yang lembut dan halus. Bentuknya Anda atur dengan menyeret titik warna. Salin CSS memberi Anda gradien dalam CSS yang berjalan di semua browser modern, dan Unduh SVG memberi file 1600 × 1200 yang bisa diskalakan ke ukuran apa pun. Semuanya berjalan di browser Anda, tanpa WebGL, tanpa unggah file, dan tanpa akun.

Langkah demi langkah dengan mesh gradient

Lihat pratinjau. Titik-titik bulat kecil di atasnya adalah titik warna, satu untuk setiap bercak warna pada mesh.
Tekan Acak untuk mendapatkan palet dan tata letak acak yang baru, sesering yang Anda mau, sampai hasilnya mendekati yang diinginkan.
Buka baris Warna dan klik sebuah kotak warna untuk memilih warna Anda sendiri. Tambah warna menambah warna (sampai 8), dan tanda x kecil pada kotak warna menghapusnya (sampai tersisa 2).
Geser slider Kompleksitas, dari 2 sampai 6, untuk mengubah jumlah titik warna pada mesh.
Seret sebuah titik untuk memindahkannya, dengan mouse atau jari. Dengan keyboard, pilih sebuah titik lalu tekan tombol panah; tahan Shift untuk langkah yang lebih besar.
Tekan Salin CSS atau Unduh SVG saat pratinjau sudah sesuai. Catatan singkat Tersalin atau Tersimpan menandakan berhasil.

Pratinjau diperbarui setiap kali Anda mengubah sesuatu, dan kotak Kode CSS selalu menampilkan CSS persis seperti yang Anda lihat. Mengubah kompleksitas atau menekan "Acak" menata ulang titik-titik, sehingga titik yang sudah Anda seret kembali ke posisi baru.

Fungsi Kompleksitas

Kompleksitas membuat kisi berisi kompleksitas × kompleksitas titik warna, dan setiap titik mendapat satu warna dari palet Anda. Titik yang lebih banyak menghasilkan mesh yang lebih beragam dengan bercak lebih kecil; titik yang lebih sedikit menghasilkan sapuan warna yang lebar dan sederhana.

Kompleksitas 2: 4 titik, tiap bercak seluas 65% kanvas
Kompleksitas 3: 9 titik, 43%
Kompleksitas 4: 16 titik, 33%
Kompleksitas 5: 25 titik, 26%
Kompleksitas 6: 36 titik, 22%

Satu hal yang perlu diperhatikan: warna dibagikan ke titik-titik, jadi palet bisa punya lebih banyak warna daripada titik pada mesh. Pada kompleksitas 2 hanya ada 4 titik, sehingga palet 6 warna paling banyak menampilkan 4 warna sekaligus. Naikkan kompleksitas agar warna lainnya ikut muncul.

Mesh gradient CSS yang bisa langsung ditempel

Kotak Kode CSS berisi dua deklarasi: background-color (rata-rata palet Anda, agar tidak ada sudut yang kosong) dan background-image yang menumpuk satu radial-gradient() untuk setiap titik warna. Ini CSS biasa, tanpa file gambar dan tanpa skrip.

Setiap lapisan memudar dari warna penuh di tengahnya menjadi transparan di tepinya, dan lapisan-lapisan itu saling tumpang tindih, sehingga warnanya berpadu. Ukuran dan posisinya berupa persentase, jadi gradien menyesuaikan diri dengan elemen yang Anda beri gradien. Cocok bagi Anda yang mencari generator gradient CSS online yang menghasilkan kode siap salin.

Mesh gradient SVG: file yang diunduh

Unduh SVG menyimpan gradien-mesh.svg. File ini memiliki viewBox 1600 × 1200, sebuah persegi panjang dasar dengan warna rata-rata yang sama, dan satu radialGradient untuk setiap titik warna. Karena berbentuk vektor, hasilnya tetap tajam sebagai wallpaper ponsel, latar slide, atau gambar untuk media sosial. Pada bingkai yang bukan 4:3, gambar mengisi bingkai dan memotong tepinya, bukan meregang.

Jika Anda butuh PNG, buka SVG di browser atau editor yang bisa membaca SVG, lalu ekspor dengan ukuran yang Anda inginkan.

Gradient mesh untuk website dan desain lain

Website atau bagian hero: tempel CSS ke aturan elemen tersebut. Teks di atas campuran warna yang ramai bisa sulit dibaca, jadi ujilah dengan Pemeriksa Kontras Warna.
Slide, wallpaper, dan unggahan media sosial: unduh SVG, lalu letakkan atau ekspor dari aplikasi desain Anda.
Menyesuaikan merek: klik kotak warna dan pilih warna Anda sendiri. Pemilih Warna Gambar bisa lebih dulu mengambil warna dari foto atau logo.

Kedua hasil adalah cuplikan dari pratinjau saat ini. Jika Anda mengacak lagi, salin atau unduh kembali untuk mendapatkan yang baru.

Pertanyaan yang sering diajukan

Apakah ada mesh gradient generator yang memberi kode CSS?

Ada, yaitu yang ini. Kotak "Kode CSS" menampilkan background-color ditambah background-image berisi lapisan radial-gradient() yang ditumpuk, satu untuk setiap titik warna. Ini CSS standar tanpa JavaScript atau file gambar, jadi berjalan di semua browser modern. Tekan "Salin CSS" lalu tempel ke stylesheet atau atribut style.

Bisakah saya mengunduh mesh gradient sebagai SVG?

Bisa. "Unduh SVG" menyimpan file dengan viewBox 1600 × 1200. File ini tersusun dari lapisan radialGradient sehingga tetap tajam pada ukuran berapa pun. Pada bingkai yang bukan 4:3, gambar mengisi bingkai dan memotong tepinya, bukan meregang.

Bagaimana memakai mesh gradient sebagai background website?

Salin CSS lalu tempel dua deklarasinya ke aturan elemen yang ingin Anda beri warna, misalnya bagian hero atau body. Bercak warnanya diposisikan dengan persentase, sehingga ikut meregang bersama elemen. Pastikan teks Anda tetap terbaca di atas warna yang Anda pilih.

Bisakah saya mendapatkan mesh gradient dalam bentuk PNG?

Tidak langsung: alat ini mengekspor CSS dan SVG, bukan PNG. Buka SVG yang sudah diunduh di browser atau editor yang bisa membaca SVG, lalu ekspor atau tangkap layarnya dengan ukuran piksel yang Anda perlukan.

Bisakah mesh gradient dianimasikan?

Tidak. Alat ini membuat satu gradien diam: Anda bisa menyeret titik dan mengganti warna, tetapi CSS dan SVG yang diekspor tidak bergerak.

Apakah ini sama dengan alat gradient mesh di Illustrator?

Tidak. Gradient mesh di Illustrator adalah kisi berisi bidang vektor yang bisa diedit. Generator ini memadukan gradien radial lembut yang saling tumpang tindih, satu untuk setiap titik warna. Hasilnya tampak mulus dan berwarna-warni serupa, tetapi diekspor sebagai CSS atau SVG biasa.