Pembuat Filter CSS Terapkan efek filter CSS seperti blur, kecerahan, kontras, dan lainnya dengan kontrol visual.

🎨

Pembuat Filter CSS

Terapkan efek filter CSS seperti blur, kecerahan, kontras, dan lainnya dengan kontrol visual.

Atur nilai filter

Gunakan penggeser untuk mengontrol blur, kecerahan, kontras, dan efek filter lainnya.

Pratinjau hasilnya

Lihat efek filter yang digabungkan diterapkan pada elemen pratinjau secara waktu nyata.

Salin CSS

Salin properti filter yang dihasilkan dengan semua fungsi filter aktif.

Loading tool...

What Is Pembuat Filter CSS?

Generator Filter CSS menyediakan kontrol visual untuk semua fungsi filter CSS: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, dan sepia. Filter CSS menerapkan efek grafis pada elemen, mirip dengan perangkat lunak pengeditan gambar. Alat ini memungkinkan Anda menggabungkan beberapa fungsi filter dan melihat efek gabungan mereka secara waktu nyata pada elemen pratinjau. Hanya filter aktif (yang diubah dari nilai defaultnya) yang disertakan dalam CSS yang dihasilkan, sehingga kode tetap bersih. Properti filter banyak digunakan untuk efek gambar, peningkatan state hover, pengolahan latar belakang, dan styling state disabled/loading. Tombol reset mengembalikan semua nilai ke defaultnya untuk eksperimen yang mudah.

Why Use Pembuat Filter CSS?

Semua sembilan fungsi filter CSS tersedia dengan penggeser visual
Hanya filter aktif yang disertakan dalam CSS yang dihasilkan untuk kode yang rapi
Pratinjau waktu nyata menunjukkan efek gabungan dari semua filter aktif
Reset satu-klik mengembalikan semua nilai ke default untuk eksperimen yang mudah

Common Use Cases

Efek Gambar

Terapkan filter seperti Instagram pada gambar dengan CSS saja.

Peningkatan Hover

Buat efek hover interaktif dengan perubahan kecerahan dan kontras.

Keadaan Dinonaktifkan

Gunakan skala abu-abu dan opasitas untuk menunjukkan elemen yang dinonaktifkan atau tidak aktif.

Pengolahan Latar Belakang

Terapkan blur dan kecerahan pada gambar latar belakang untuk keterbacaan teks overlay.

Technical Guide

Properti filter CSS menerima satu atau lebih fungsi filter yang dipisahkan oleh spasi. Setiap fungsi membutuhkan nilai tertentu: blur() menerima piksel, brightness() dan contrast() menerima persentase (100% adalah normal), grayscale() mengonversi ke abu-abu (0-100%), hue-rotate() menggeser spektrum warna (0-360deg), invert() membalik warna (0-100%), opacity() mengontrol transparansi (0-100%), saturate() menyesuaikan intensitas warna (100% adalah normal), dan sepia() menerapkan nada hangat (0-100%). Beberapa filter diterapkan secara berurutan - urutan dapat mempengaruhi hasil akhir. Untuk kinerja, filter memicu konteks tumpukan baru dan dapat menyebabkan repainting. Gunakan will-change: filter saat menganimasikan. Fungsi filter drop-shadow() adalah alternatif dari box-shadow yang mengikuti kanal alfa elemen, bekerja dengan baik dengan PNG transparan dan SVG.

Tips & Best Practices

1
Jaga kecerahan dan kontras dekat dengan 100% untuk efek yang halus dan alami
2
Gabungkan skala abu-abu dengan hover untuk membuat interaksi pengungkapan warna
3
Gunakan hue-rotate untuk variasi skema warna cepat
4
Terapkan blur pada gambar latar belakang di balik teks untuk keterbacaan yang ditingkatkan

Related Tools

Pembuat Gradien CSS

Buat gradien linier, radial, dan konik yang indah dengan beberapa pemberhentian warna dan kontrol sudut.

🎨 CSS & Design

Tempat Bermain CSS Transform

Eksperimen dengan transformasi CSS termasuk putar, skala, miring, dan terjemahkan dengan perspektif 3D.

🎨 CSS & Design

Pembuat Animasi CSS

Buat animasi keyframe CSS dengan efek preset dan waktu yang dapat disesuaikan.

🎨 CSS & Design

Pembuat Transisi CSS

Buat transisi CSS dengan properti, durasi, easing, dan efek hover yang dapat disesuaikan.

🎨 CSS & Design

Frequently Asked Questions

Q Apakah urutan filter mempengaruhi hasil?

Ya, filter diterapkan secara berurutan. Misalnya, menerapkan skala abu-abu sebelum sepia memberikan hasil yang berbeda dengan kebalikannya.

Q Bisakah saya menganimasikan filter CSS?

Ya, filter CSS mendukung transisi dan animasi. Namun, animasi filter yang kompleks dapat mempengaruhi kinerja.

Q Apakah filter mempengaruhi elemen anak?

Ya, filter CSS diterapkan pada seluruh elemen dan semua keturunannya. Gunakan backdrop-filter untuk hanya mempengaruhi area di belakang elemen.

Q Apa dampak kinerja dari filter CSS?

Filter memicu kompositing GPU dan dapat menyebabkan penggambaran ulang. Gunakan secukupnya pada elemen besar dan selama animasi.

Q Bisakah saya menggunakan filter pada teks?

Ya, properti filter berlaku untuk semua elemen termasuk teks. Namun, blur pada teks membuatnya tidak terbaca-gunakan hanya untuk tujuan dekoratif.

About This Tool

Pembuat Filter CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.