Kategori: Alat pengembang
Generator Filter CSS
Bangun deklarasi filter CSS dengan slider langsung
Atur blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, dan sepia dengan slider, pratinjau efek gabungannya secara langsung, dan salin deklarasi filter CSS yang dihasilkan.
filter: none;
Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.
Apa fungsi alat ini
Properti CSS filter menerapkan efek grafis seperti blur dan penyesuaian warna langsung di browser, tanpa mengedit gambar sumbernya. Menggabungkan beberapa fungsi dalam satu deklarasi cukup merepotkan bila ditulis manual — alat ini membangun string-nya untuk Anda saat menyesuaikan tiap efek, dan hanya menyertakan fungsi yang benar-benar Anda ubah.
Cara memakainya
- Geser slider untuk menyesuaikan tiap fungsi filter.
- Amati kotak pratinjau yang diperbarui secara langsung.
- Salin deklarasi filter yang dihasilkan ke dalam stylesheet Anda.
Privasi
Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.
Pertanyaan yang sering diajukan
- Bisakah ini diterapkan pada gambar latar belakang, bukan elemen?
- Bisa — filter bekerja pada elemen apa pun, termasuk yang memiliki background-image. Untuk hanya mengaburkan latar belakang di balik sebuah elemen (bukan kontennya), gunakan backdrop-filter.
- Apakah filter memengaruhi performa?
- Filter yang kompleks atau dianimasikan, terutama blur, bisa mahal untuk dirender pada ukuran besar. Uji pada perangkat sasaran Anda yang sebenarnya sebelum merilis filter yang dianimasikan.
- Mengapa urutan fungsi filter berpengaruh?
- Setiap fungsi diterapkan pada hasil fungsi sebelumnya, sehingga grayscale(100%) sepia(50%) bisa tampak berbeda dari urutan sebaliknya. Alat ini menerapkannya dalam urutan tetap yang masuk akal.