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 yang memukau untuk latar belakang situs web, grafis media sosial, dan desain UI. Sesuaikan jumlah titik warna, posisinya, dan warnanya untuk menghasilkan gradien organik unik 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 mengatur posisinya dan sesuaikan aliran gradien sesuai keinginan Anda.
Salin kode CSS yang dihasilkan atau unduh gradien sebagai gambar PNG untuk digunakan dalam proyek Anda.

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