Filter CSS: Efek Visual untuk Gambar dan Elemen
Apa Itu Filter dalam CSS?
Filter CSS adalah fitur yang memungkinkan kita menerapkan efek visual langsung pada elemen seperti gambar, latar belakang, atau bahkan elemen HTML biasa — tanpa harus menggunakan software pengedit gambar atau JavaScript.
Dengan filter, kita bisa:
- Mengubah kontras dan kecerahan gambar.
- Membuat efek grayscale, blur, atau saturasi.
- Menambahkan efek drop shadow atau blending.
- Meningkatkan kualitas tampilan visual secara real-time.
Fitur ini sangat berguna untuk desain web modern, animasi interaktif, serta penyesuaian tema visual secara dinamis.
1. Sintaks Dasar
Properti filter digunakan untuk menerapkan satu atau lebih efek filter pada elemen.
Contoh dasar:
.elem {
filter: nama-filter(nilai);
}
Bisa juga menggunakan beberapa filter sekaligus dengan dipisahkan spasi:
.elem {
filter: brightness(70%) contrast(120%) sepia(30%);
}
💡 Filter bekerja paling baik pada elemen gambar (<img>), elemen dengan background-image, atau elemen dengan konten visual seperti video atau SVG.
2. Jenis-Jenis Filter CSS
Berikut adalah beberapa fungsi filter yang umum digunakan:
| Fungsi Filter | Deskripsi |
|---|---|
| blur(px) | Membuat elemen tampak buram (blur) |
| brightness(%) | Mengatur kecerahan (0% = hitam, 100% = default) |
| contrast(%) | Mengatur kontras (0% = abu-abu, 100% = default) |
| grayscale(%) | Mengubah warna menjadi skala abu-abu |
| hue-rotate(deg) | Memutar hue (warna) dalam roda warna |
| invert(%) | Membalik warna (100% = negatif warna) |
| opacity(%) | Mengatur transparansi elemen |
| saturate(%) | Mengatur intensitas warna (0% = abu-abu, 100% = default) |
| sepia(%) | Memberi efek warna coklat tua (sepia) |
| drop-shadow() | Membuat bayangan di luar elemen (berbeda dengan box-shadow) |
3. Penjelasan Detail dan Contoh Penggunaan
a. blur()
Membuat efek buram pada elemen.
Contoh:
.blur-img {
filter: blur(5px);
}
Cocok digunakan untuk:
- Background buram saat modal aktif.
- Efek loading gambar.
b. brightness()
Mengatur tingkat kecerahan elemen.
Contoh:
.brighter {
filter: brightness(150%);
}
Gunakan nilai kurang dari 100% untuk gelap, lebih dari 100% untuk terang.
c. contrast()
Mengatur kontras antara warna terang dan gelap.
Contoh:
.high-contrast {
filter: contrast(150%);
}
Efek ini membantu meningkatkan visibilitas pada layar dengan kualitas rendah.
d. grayscale()
Mengubah elemen menjadi skala abu-abu.
Contoh:
.gray {
filter: grayscale(100%);
}
Sering digunakan untuk:
- Galeri foto dengan efek hover.
- Mode gelap sederhana.
e. hue-rotate()
Memutar hue/warna elemen sebesar sudut tertentu (dalam derajat).
Contoh:
.color-shift {
filter: hue-rotate(90deg);
}
f. invert()
Membalik semua warna elemen (mirip efek negatif foto).
Contoh:
.negative {
filter: invert(100%);
}
g. opacity()
Mengatur transparansi elemen (mirip dengan properti opacity, tetapi berfungsi dalam filter chain).
Contoh:
.transparan {
filter: opacity(60%);
}
h. saturate()
Mengatur intensitas warna.
Contoh:
.vivid {
filter: saturate(200%);
}
Nilai 0% akan membuat elemen grayscale.
i. sepia()
Memberikan efek vintage/senia.
Contoh:
.old-photo {
filter: sepia(80%);
}
j. drop-shadow()
Menambahkan bayangan di luar elemen, mirip box-shadow, tapi bisa mengikuti bentuk elemen (termasuk gambar transparan).
Contoh:
.shadow {
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
}
⚠️ drop-shadow() tidak bekerja dengan display: none.
4. Contoh Praktis
a. Gambar dengan Efek Hover
HTML
<img src="foto.jpg" class="hover-effect" alt="Foto">
CSS
.hover-effect {
transition: filter 0.3s ease;
}
.hover-effect:hover {
filter: grayscale(100%) brightness(80%);
}
Ketika di-hover, gambar akan menjadi hitam putih dan sedikit gelap.
b. Efek Dark Mode Sederhana
CSS
.dark-mode {
filter: invert(100%) sepia(100%) contrast(80%);
}
Anda bisa menerapkannya pada seluruh halaman dengan menambahkan kelas dark-mode pada <body> menggunakan JavaScript.
c. Video dengan Efek Blur dan Grayscale
HTML
<video src="video.mp4" class="filtered-video" autoplay muted></video>
CSS
.filtered-video {
filter: blur(2px) grayscale(50%);
}
5. Gabungan Filter untuk Efek Kreatif
Anda bisa menggabungkan beberapa filter untuk menciptakan efek unik.
Contoh:
.foto-retro {
filter: sepia(60%) contrast(110%) saturate(140%) brightness(95%);
}
6. Tips dan Trik Efektif
- Gunakan transition agar efek filter berjalan halus saat di-hover.
- Jangan gunakan filter terlalu banyak karena bisa memengaruhi performa halaman.
- Uji filter di perangkat mobile untuk memastikan tidak memperberat rendering.
- Simpan efek filter dalam kelas terpisah agar mudah digunakan ulang.
- Gabungkan dengan JavaScript untuk mode gelap, efek interaktif, atau animasi visual.
7. Kompatibilitas Browser
Filter CSS didukung oleh hampir semua browser modern, termasuk:
- Chrome
- Firefox
- Safari
- Edge
Namun, beberapa filter seperti drop-shadow() mungkin tidak didukung di beberapa versi lama.
Kesimpulan
CSS filter adalah alat yang sangat kuat untuk menambahkan efek visual secara langsung pada elemen HTML. Dengan berbagai fungsi seperti blur, grayscale, brightness, drop-shadow, dan lainnya, Anda bisa menciptakan efek yang menarik dan responsif tanpa harus mengandalkan gambar tambahan atau JavaScript.
Selanjutnya, kita akan membahas Gradient CSS, yaitu cara membuat latar belakang dengan gradasi warna yang menarik.
💡 Tips Praktis
- Gunakan filter untuk efek visual cepat tanpa harus mengedit gambar.
- Gunakan drop-shadow() untuk bayangan sesuai bentuk gambar transparan.
- Gunakan gabungan filter untuk efek vintage, dark mode, atau interaksi hover.
- Uji performa filter di perangkat mobile untuk memastikan tidak memperberat rendering.
