Pembuat gradasi mesh
Pilih jumlah titik kontrol
Lebih banyak titik membuat lebih banyak area warna. Saat kisi diubah, warna lama dipertahankan jika memungkinkan.
Warna, posisi, dan karya yang diekspor tetap berada di browser ini. URL funnel hanya memuat langkah dan parameter atribusi.
Edit gradasiBuat 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 melalui 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.
Penghitung FPS
Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.
Pemformat JSON
Tempel JSON untuk dirapikan dengan indentasi 2 atau 4 spasi, dipadatkan menjadi output ringkas, atau diperiksa sintaksnya sebelum hasilnya disalin.
Generator Warna Acak
Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.
Pemilih Warna HEX
Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.
Penyederhana Aljabar Boolean
Sederhanakan ekspresi Boolean memakai Karnaugh map dan algoritma Quine-McCluskey. Menampilkan setiap langkah minimisation dan bentuk SOP/POS akhir.