Apa itu Filter CSS?

Filter CSS memungkinkan Anda menerapkan efek grafis seperti buram atau pergeseran warna ke suatu elemen. Mereka biasanya digunakan untuk gambar, latar belakang, dan batas.

Filter dapat digunakan untuk membuat efek visual, menyempurnakan gambar, atau membuat elemen desain unik tanpa memerlukan alat pengeditan gambar eksternal.

Properti Filter CSS yang Didukung

• blur()- Menerapkan keburaman Gaussian ke elemen.
• brightness()- Menyesuaikan kecerahan elemen.
• contrast()- Menyesuaikan kontras elemen.
• grayscale()- Mengonversi elemen ke skala abu-abu.
• hue-rotate()- Menerapkan rotasi rona ke elemen.
• invert()- Membalikkan warna elemen.
• opacity()- Menyesuaikan opasitas elemen.
• saturate()- Menjenuhkan atau mendejenuhkan elemen.
• sepia()- Mengonversi elemen menjadi sepia.

Cara Menerapkan Filter

Dengan menggunakan kode CSS yang dihasilkan oleh alat ini, Anda dapat menerapkan filter ke elemen HTML apa pun. Begini caranya:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Kompatibilitas Browser

Filter CSS didukung secara luas di browser modern, termasuk Chrome, Firefox, Safari, Edge, dan Opera. Namun, browser lama seperti Internet Explorer tidak mendukungnya.