Generator Mesh Gradient

Buat latar CSS bergaya mesh yang lembut dari gradien radial berlapis. Seret titik warna, atur sebaran, acak dengan seed, dan salin kode CSS murni.

Pengaturan mesh

Titik warna

Pratinjau

Seret pegangan di pratinjau atau ketik nilai yang tepat.

Kode CSS
background-color: #ff99cc;
background-image:
  radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%),
  radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%),
  radial-gradient(at 100% 100%, #baffc9 0, transparent 50%),
  radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);

Alat Terkait

Lihat Semua
Generator CSS Box Shadow Generator CSS Gradient Generator CSS Flexbox Generator CSS Grid Generator Border Radius Generator Glassmorphism Generator Neumorphism Generator Text Shadow

Apa itu Generator Mesh Gradient?

Membuat tampilan "mesh gradient" lembut yang populer dengan CSS biasa: sebuah warna latar ditambah beberapa gradien radial, masing-masing dimulai dari titik warna dan memudar menjadi transparan. Anda menempatkan hingga delapan titik dengan menyeretnya di pratinjau atau mengetik posisinya.

Cara menggunakan Generator Mesh Gradient

  1. Pilih Warna latar.
  2. Pilih sebuah titik warna lalu atur Warna, Sebaran, dan Posisi X / Posisi Y, atau seret titik di pratinjau.
  3. Gunakan Tambah titik / Hapus titik untuk mengubah jumlah warna yang dicampur (1–8).
  4. Klik Acak untuk mesh baru, atau masukkan Seed lalu tekan Terapkan seed untuk mendapatkan mesh yang bisa direproduksi.
  5. Salin kode CSS-nya.

Contoh

Masukan
Default 4 points, background #ff99cc
Keluaran
background-color: #ff99cc;
background-image:
  radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%),
  radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%),
  radial-gradient(at 100% 100%, #baffc9 0, transparent 50%),
  radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);

Kapan menggunakan Generator Mesh Gradient

Gunakan untuk latar hero, landing page, splash screen aplikasi, dan latar warna buram di belakang kartu glassmorphism. Jika Anda butuh transisi warna lurus yang presisi, gunakan Generator CSS Gradient; untuk distorsi mesh sungguhan, Anda butuh alat vektor atau shader canvas/WebGL.

Cara kerja Generator Mesh Gradient

Setiap titik menjadi radial-gradient(at x% y%, color 0, transparent spread%) dan semuanya dicantumkan di background-image di atas background-color. Karena setiap gradien memudar menjadi transparan, warna-warnanya bertumpang tindih dan bercampur dengan halus. Acak memakai generator pseudo-acak ber-seed (mulberry32): seed dan jumlah titik yang sama selalu menghasilkan warna dan posisi yang sama. Ini adalah pendekatan dari mesh gradient sungguhan (yang tidak dimiliki CSS), bukan patch mesh bilinear.

Kasus Penggunaan Umum

  • Latar hero landing page
  • Latar belakang untuk kartu glassmorphism
  • Placeholder warna-warni untuk sampul blog
  • Layar onboarding aplikasi
  • Latar yang bisa direproduksi lewat seed dalam design system

Pertanyaan Umum

Apakah ini mesh gradient sungguhan?

Tidak ada properti CSS yang menggambar mesh gradient sungguhan. Menumpuk gradien radial yang memudar menjadi transparan adalah teknik CSS standar yang menghasilkan tampilan lembut yang sangat mirip.

Apa fungsi Sebaran?

Sebaran adalah jarak (dalam persentase elemen) di mana warna sebuah titik telah sepenuhnya memudar. Nilai yang lebih besar membuat warna menutupi area yang lebih luas.

Bisakah saya mendapatkan mesh acak yang sama lagi?

Bisa. Catat nilai Seed lalu tekan Terapkan seed nanti; seed yang sama dengan jumlah titik yang sama membuat ulang mesh yang sama.

Jelajahi kategori lainnya

CRC
Algoritma Cyclic Redundancy Check untuk deteksi kesalahan
MD
Algoritma Message Digest (MD2, MD4, MD5)
SHA-1
Secure Hash Algorithm 1 - fungsi hash 160-bit
SHA-2
Keluarga Secure Hash Algorithm 2 (SHA-224, SHA-256, SHA-384, SHA-512)