Pembuat gradasi mesh

Buat latar multicolor yang halus dari 4, 6, atau 9 titik yang dapat dipindahkan. Pilih warna setiap titik, geser titik di kanvas, coba palet acak yang telah dipilih dengan cermat, lalu ekspor hasilnya sebagai SVG atau PNG. Anda juga dapat menyalin pendekatan CSS dari gradasi radial yang ditumpuk. Proyek tetap berada di tab browser ini selama Anda bekerja.

Cara membuat gradasi bergaya mesh

  1. 1

    Pilih kisi

    Mulai dengan 4, 6, atau 9 titik kontrol. Lebih banyak titik menghasilkan lebih banyak area warna.

  2. 2

    Pilih warna

    Gunakan pemilih warna untuk setiap titik. Editor menyimpan warna HEX enam digit.

  3. 3

    Pindahkan titik

    Geser titik, masukkan posisi horizontal dan vertikal, atau gunakan tombol panah.

  4. 4

    Pilih ukuran

    Pilih format lanskap, layar lebar, atau persegi untuk berkas SVG dan PNG.

  5. 5

    Ekspor desain

    Unduh PNG atau SVG, atau salin pendekatan CSS dengan gradasi radial.

Cara tiga keluaran dirender

  • PNG memakai pencampuran warna berbobot jarak yang sama dengan pratinjau. Jika rasio ukuran pilihan berbeda, titik relatif yang sama digambar dalam dimensi baru.
  • SVG menumpuk gradasi radial pada titik kontrol yang sama dan tetap tajam ketika diperbesar.
  • CSS membuat satu lapisan radial-gradient() per titik di atas warna dasar, tanpa berkas gambar terpisah.

SVG dan CSS memakai data proyek yang sama, tetapi merupakan pendekatan ringan untuk tampilan mesh. Pikselnya tidak akan sama persis dengan PNG.

Panduan palet

  • Rona yang berdekatan biasanya menghasilkan transisi lembut.
  • Rona kontras mempertegas batas antararea.
  • Palet acak adalah titik awal, bukan jaminan keterbacaan.
  • Periksa kontras teks, ikon, dan kontrol yang diletakkan di atas latar akhir.

Menempatkan titik kontrol

Geser titik bernomor pada pratinjau, atau fokuskan titik lalu gunakan tombol panah. Tahan Shift untuk bergerak lima poin persentase. Kolom horizontal dan vertikal juga dapat digunakan untuk memasukkan posisi yang tepat.

Titik dapat mencapai tepi. Mengumpulkan beberapa titik akan memusatkan warnanya pada satu area, sedangkan menyebarkannya memberi setiap warna ruang lebih luas.

Penggunaan umum

  • Latar bagian utama dan pemisah bagian.
  • Kartu media sosial dan gambar mini video.
  • Latar presentasi dan ilustrasi.
  • Layar pembuka dan panel dekoratif.

PNG paling sesuai dengan pratinjau. Gunakan SVG untuk penskalaan tajam, atau CSS untuk latar yang dapat diedit tanpa gambar terpisah.

Privasi dan penyimpanan browser

Warna, posisi, dan resolusi tetap berada dalam memori browser dan sessionStorage. Data tersebut tidak ditambahkan ke URL funnel atau status server kami. Alat dapat mencatat bahwa ekspor dilakukan tanpa menyertakan nilai proyek.

Proyek dapat dipulihkan dari sessionStorage hingga enam jam selama tab saat ini tetap terbuka. Menutup tab biasanya menghapusnya lebih cepat, jadi unduh atau salin semua yang ingin Anda simpan.

Pertanyaan yang Sering Diajukan

Ketiganya menggunakan metode render berbeda. PNG mencampur piksel berdasarkan jarak, sedangkan SVG dan CSS menumpuk gradasi radial. Warna dan posisi sama, tetapi pikselnya tidak identik.

Bisa. Geser titik, gunakan kolom posisi, atau fokuskan titik lalu tekan tombol panah. Tahan Shift untuk langkah yang lebih besar.

Editor menyimpan warna HEX enam digit. Gunakan pemilih warna atau konversikan RGB maupun HSL ke HEX terlebih dahulu.

Bukan. CSS yang disalin mendekati efek tersebut dengan menumpuk gradasi radial standar.

Proyek dapat dipulihkan dari sessionStorage hingga enam jam di tab saat ini. Menutup tab biasanya menghapusnya lebih cepat. Proyek tidak dikirim melalui server kami atau ditambahkan ke URL funnel.

Alat Terkait