Generator Gradien Mesh

Buat latar belakang gradien mesh yang indah

Generator Gradien Mesh

Titik Warna

#F97316Posisi: 20%, 30%

#E11D48Posisi: 80%, 20%

#7C3AEDPosisi: 50%, 80%

#06B6D4Posisi: 10%, 70%

Ukuran Kanvas

CSS

background-color: #f97316;
background-image:
    radial-gradient(at 20% 30%, rgba(249,115,22,1) 0px, transparent 50%),
    radial-gradient(at 80% 20%, rgba(225,29,72,1) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(124,58,237,1) 0px, transparent 50%),
    radial-gradient(at 10% 70%, rgba(6,182,212,1) 0px, transparent 50%);

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.

Cara menggunakan

Pilih warna dasar dengan mengklik swatch warna atau memasukkan nilai hex. Tambahkan hingga 6 titik kontrol warna.
Seret titik kontrol di kanvas untuk mengubah arah aliran gradien.
Salin CSS atau unduh gradien sebagai PNG.

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.

Alat terkait

Konverter Kode Warna

Konversi kode warna HEX, RGB, HSL & CMYK

Konverter Warna

Konversi kode HEX, RGB, HSL, HSV & CMYK

Pencampur Warna

Campurkan dua warna secara visual

Pencari Nama Warna

Temukan nama warna terdekat untuk nilai apa pun

Pencari Warna Komplementer

Temukan warna komplementer untuk input apa pun

Penjelajah Warna Merek

Jelajahi warna merek-merek terkenal