CSS Filter Generator

Tentang alat ini

Generator Filter CSS memungkinkan Anda menyesuaikan secara visual sembilan fungsi filter CSS — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, dan sepia — dan melihat efek kombinasinya secara real time.

Filter CSS menerapkan efek visual pada elemen HTML mirip perangkat lunak pengeditan foto. Dipercepat GPU dan bekerja pada gambar, latar belakang, teks, dan elemen HTML apa pun.

Cara penggunaan

1. Seret slider mana pun untuk menerapkan efek filter tersebut.
2. Gabungkan beberapa filter — pratinjau diperbarui secara langsung.
3. Filter dengan nilai default secara otomatis dikecualikan dari output.
4. Klik Reset semua untuk kembali ke default.
5. Klik Salin untuk menyalin properti CSS filter.

Kasus penggunaan

Desainer menggunakan grayscale dan sepia untuk bagian UI monokrom. Pengembang menggunakan blur untuk latar belakang kaca buram. brightness umum untuk efek hover. Implementasi mode gelap menggunakan filter invert.

Pertanyaan umum

• Apa perbedaan antara filter dan backdrop-filter? — filter berlaku untuk elemen dan semua turunannya. backdrop-filter hanya berlaku untuk area di belakang elemen (berguna untuk overlay kaca buram).
• Bisakah saya menggabungkan beberapa filter? — Ya. Daftarkan dipisahkan spasi di properti filter. Alat ini melakukannya secara otomatis.
• Apakah filter CSS memengaruhi performa? — Filter sederhana seperti grayscale dan brightness murah. Blur lebih mahal, terutama di area besar — gunakan secukupnya di mobile.