Generator Filter & Blend CSS
Gabungkan filter secara visual, hasilkan kode, dan simpan gambar.
Prasetel
* Anda dapat menyeret pegangan [≡] untuk menyusun ulang filter.
Pratinjau
CSS Dihasilkan
Tailwind CSS
Anda mungkin juga suka
Tentang Generator
Generator Filter & Blend CSS adalah alat pengembang gratis yang memungkinkan Anda menggabungkan secara visual properti pemrosesan gambar CSS: filter, backdrop-filter, dan mix-blend-mode, serta menghasilkan kode secara otomatis.
Anda dapat membuat ulang penyesuaian kecerahan, kontras, dan keburaman murni dengan CSS. Anda dapat mengubah urutan filter dengan menyeret sambil melihat pratinjau hasilnya. Ini juga menghasilkan kelas Tailwind CSS dan gambar dapat disimpan sebagai PNG.
Cara menggunakan alat ini
Siapkan gambar
Gunakan tombol "Ganti Gambar" untuk memuat gambar lokal. Gambar tidak pernah dikirim ke server.
Tambah dan urutkan filter
Pilih opsi dan klik "Tambah". Sesuaikan intensitas dan urutkan filter dengan menyeretnya.
Salin kode dan simpan
Kode CSS dan Tailwind dihasilkan secara instan. Klik "Simpan Gambar" untuk mengunduh hasilnya.
Glosarium Filter CSS
- filter
- Properti CSS yang menerapkan efek visual langsung ke elemen.
- backdrop-filter
- Menerapkan efek filter ke area "di belakang" elemen. Sangat penting untuk efek "Glassmorphism".
- mix-blend-mode
- Menentukan bagaimana elemen berpadu dengan konten di belakangnya.
- Tailwind CSS
- Kerangka kerja CSS. Alat ini dapat menghasilkan kelas ringkas.
Pertanyaan Umum
- Q.Apakah gambar yang dipilih disimpan ke server?
- Tidak, fungsi ini hanya digunakan untuk menampilkan di browser Anda (lingkungan lokal) dan data tidak pernah dikirim ke server eksternal. Beroperasi sepenuhnya aman dan offline.
- Q.Apa perbedaan antara filter dan backdrop-filter?
- Properti `filter` menerapkan efek langsung ke elemen. Sebaliknya, `backdrop-filter` menerapkan efek ke konten 'di belakang' elemen. Untuk UI tempat Anda memburamkan latar belakang dan menempatkan teks di depan, `backdrop-filter` digunakan.
- Q.Mengapa efek tidak berubah saat saya mengurutkan ulang filter?
- Kombinasi tertentu, seperti 'Kontras' dan 'Kecerahan', mungkin menunjukkan sedikit perbedaan visual. Namun, kombinasi seperti 'Buram' diikuti 'Kontras' akan menghasilkan perbedaan yang jelas.
- Q.Gagal menyimpan gambar.
- Jika Anda memuat gambar dari URL eksternal, kebijakan CORS dapat memblokir ekspor. Coba buka file langsung dari perangkat Anda melalui 'Ganti Gambar'.
Kasus Penggunaan
UI Glassmorphism
Gunakan backdrop-filter pada latar belakang semi-transparan untuk efek kedalaman modern.
Penyesuaian Header
Tingkatkan keterbacaan teks dengan menurunkan kecerahan gambar latar belakang.
Efek Hover Dinamis
Pertahankan gambar dalam skala abu-abu dan ubah ke warna saat mengarahkan kursor.
Penyesuaian Mode Gelap
Gunakan ini untuk menggelapkan gambar sedikit saat mode gelap sistem aktif.
Detail Teknis
Pentingnya Urutan Filter
Poin teknis terbesar dalam filter CSS adalah "urutan". Alat kami memungkinkan Anda melihat perbedaan secara real-time.
Akselerasi Perangkat Keras
Efek ini menggunakan GPU perangkat. Fungsi "Simpan Gambar" juga menggunakan API Canvas 2D untuk mensimulasikan rendering dan menghasilkan PNG.
Kirim Umpan Balik
Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.
Umpan balik sementara ditangguhkan
Server sedang sibuk atau perlindungan spam aktif. Silakan coba lagi nanti.