CSS Filter Generator
Membuat dan memvisualisasikan filter gambar CSS kustom
Preview
CSS Code
Kontrol Filter
Filter Populer
Vintage
Neon Glow
Polaroid
Vintage Film
Seni Digital
Cara Menggunakan Filter CSS
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:
1. Pilih Elemen
Pilih elemen HTML yang ingin Anda terapkan filternya. Ini bisa berupa gambar, latar belakang, atau elemen lainnya.
2. Tambahkan Kelas atau ID
Jika elemen belum memiliki kelas atau ID, tambahkan satu untuk mempermudah penargetan dengan CSS.
3. Terapkan Filter
Gunakan CSSfilterdi stylesheet atau gaya sebaris Anda untuk menerapkan filter yang dihasilkan.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. Gabungkan Beberapa Filter
Anda dapat menggabungkan beberapa fungsi filter dengan mencantumkannya satu demi satu, dipisahkan oleh spasi.
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.
Related Tools
Generator Transisi CSS3
Transisi opasitas yang mulus
Buat Gradien Teks CSS yang Indah dengan Mudah
Buat Efek Teks Gradien yang Menakjubkan untuk Situs Web Anda
Hasilkan Transformasi CSS3 dengan Mudah
Alat yang kuat dan intuitif untuk membuat transformasi CSS3 yang kompleks tanpa menulis kode. Visualisasikan perubahan secara real-time dan salin CSS yang dihasilkan untuk digunakan dalam proyek Anda.
Alat Pengkodean URL
Kodekan parameter URL dengan mudah langsung di browser Anda.
Konverter Kecepatan
Ubah kecepatan lari dengan mudah antara unit yang berbeda dan hitung perkiraan waktu dan jarak
Pembuat Hash Kata Sandi WordPress
Hasilkan hash kata sandi yang aman untuk WordPress