Pembuat gradasi mesh
Pilih jumlah titik kontrol
Lebih banyak titik membuat lebih banyak area warna. Saat kisi diubah, warna lama dipertahankan jika memungkinkan.
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
Pilih kisi
Mulai dengan 4, 6, atau 9 titik kontrol. Lebih banyak titik menghasilkan lebih banyak area warna.
-
2
Pilih warna
Gunakan pemilih warna untuk setiap titik. Editor menyimpan warna HEX enam digit.
-
3
Pindahkan titik
Geser titik, masukkan posisi horizontal dan vertikal, atau gunakan tombol panah.
-
4
Pilih ukuran
Pilih format lanskap, layar lebar, atau persegi untuk berkas SVG dan PNG.
-
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 ke server kami atau ditambahkan ke URL funnel.
Alat Terkait
Referensi Tabel ASCII
Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.
Referensi Karakter HTML
Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.
Referensi pintasan papan ketik
Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.
Konverter Ukuran File
Konversi antara byte, KB, MB, GB, TB, dan satuan biner IEC (KiB, MiB, GiB, TiB) dengan kombinasi desimal dan biner apa pun yang Anda inginkan.
JSON ke YAML
Konversi JSON ke YAML dengan penjelajaran yang tepat, penutupan string yang aman, skalar blok berbaris ganda, serta kunci yang tersortir untuk konfigurasi yang lebih rapi.
Pemformat HTML
Format HTML secara lokal di browser dengan inden dua atau empat spasi. HTML tidak diunggah atau divalidasi.
Alat ini tersedia dalam bahasa lain
- メッシュグラデーション生成ツール [JA]
- Generator för nätgradienter [SV]
- Meshverloopgenerator [NL]
- 메시 그라데이션 생성기 [KO]
- Mesh-Verlauf-Generator [DE]
- مولّد التدرج الشبكي [AR]
- Gerador de gradiente em malha [PT]
- Generador de degradados de malla [ES]
- Generator gradientu siatkowego [PL]
- เครื่องมือสร้างเกรเดียนต์แบบตาข่าย [TH]
- Trình tạo chuyển màu dạng lưới [VI]
- Générateur de dégradés en maillage [FR]
- Mesh Gradient Generator [EN]
- Generatore di sfumature a maglia [IT]
- Генератор сетчатого градиента [RU]
- Ağ gradyan oluşturucu [TR]
- 网格渐变生成器 [ZH]