Generator Filter CSS

Q: Apakah filter berfungsi pada format SVG?

Ya, CSS `filter` diterapkan pada elemen SVG dengan cara yang sama seperti elemen DOM lainnya. SVG juga memiliki sistem elemen ` ` yang lebih lengkap dan kaya fitur, namun jauh lebih rumit secara kode.

Langkah 1 / 2

Berikutnya

CSS filter menerapkan efek pemrosesan gambar, seperti blur, kecerahan, kontras, dan saturasi, pada elemen apa pun, bukan hanya gambar. Kesalahan sering terjadi saat merangkai beberapa filter dan menentukan satuannya. Generator ini menyusun deklarasi filter untuk lima fungsi paling umum: blur, kecerahan, kontras, skala abu-abu, dan saturasi. Masukkan nilai Anda dan salin CSS yang dihasilkan.

Cara membuat rangkaian filter

1

Masukkan nilai

Blur dalam piksel; kecerahan, kontras, skala abu-abu, dan saturasi dalam persen.
2

Pahami skalanya

Kecerahan dan kontras 100% berarti tidak berubah; 0% berarti elemen menjadi hitam atau abu-abu. Skala abu-abu berjalan dari 0% (warna penuh) hingga 100% (tanpa warna); saturasi 100% mempertahankan warna apa adanya.
3

Buat CSS-nya

Klik tombol dan alat ini mengeluarkan aturan `filter` gabungan dengan kelima fungsi.
4

Salin aturannya

Salin hasilnya dan tempel ke stylesheet Anda.
5

Periksa urutannya

Fungsi diterapkan dari kiri ke kanan. Jika efeknya berbeda dari perkiraan, sesuaikan nilainya.

Fungsi Filter

Fungsi	Satuan	Efek
`blur()`	px	Blur Gaussian. 0 = tanpa blur
`brightness()`	% atau bentuk desimal	100% = tidak berubah, 0% = hitam, 200% = dua kali lipat
`contrast()`	% atau bentuk desimal	100% = tidak berubah, 0% = abu-abu, 200% = dua kali lipat
`saturate()`	% atau bentuk desimal	100% = tidak berubah, 0% = skala abu-abu
`grayscale()`	% atau bentuk desimal	0% = tidak ada perubahan, 100% = sepenuhnya terdesaturasi
`sepia()`	% atau bentuk desimal	0% = tidak berubah, 100% = sepia penuh
`hue-rotate()`	derajat	0 derajat = tidak berubah; memutar roda warna
`invert()`	% atau bentuk desimal	0% = tidak ada perubahan, 100% = terbalik sepenuhnya
`opacity()`	% atau desimal	Sama dengan properti `opacity`
`drop-shadow()`	x y buram warna	mirip dengan `box-shadow`, tetapi mengikuti opasitas atau clip-path

Urutan penggabungan sangat penting

filter: brightness(0.5) saturate(2) menerapkan tingkat kecerahan terlebih dahulu, kemudian saturasi; kedua filter tersebut bekerja secara komposit.

filter: saturate(2) brightness(0.5) terlebih dahulu menerapkan efek saturasi. Karena gambar lebih terang sebelum dipergelapkan, tingkat saturasi warnanya menjadi lebih mencolok.

Perbedaan visualnya sangat halus namun nyata. Coba kedua urutan tersebut ketika rantai filter tidak tampak seperti yang Anda harapkan.

Resep Umum

/* Tampilan foto pudar */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* Vintage / pudar */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* Pendekatan duotone */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* Menggelapkan gambar utama */
filter: brightness(0.6);

/* Keadaan nonaktif */
filter: grayscale(1) opacity(0.6);

/* Lapisan kaca buram */
filter: blur(12px) saturate(1.3);

backdrop-filter untuk efek kaca buram

filter berlaku untuk elemen itu sendiri; backdrop-filter berlaku untuk bagian di balik elemen setengah transparan, efek kaca buram yang dipopulerkan iOS.

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

Dukungan tersedia di semua peramban modern; Firefox akhirnya mendukung fitur ini tanpa memerlukan penanda khusus mulai versi 103+.

Catatan kinerja

blur() merupakan filter termahal karena memerlukan proses konvolusi pada setiap piksel menggunakan kernel. Efek kabur sebesar 30px pada gambar hero beresolusi 4K benar-benar menurunkan jumlah frame.
grayscale, sepia, brightness dan sejenisnya merupakan transformasi warna per piksel yang murah.
Filter diproses secara dipercepat oleh GPU pada peramban modern, namun animasi blur() masih mengalami gangguan (stuttering) di perangkat berkinerja rendah.
Pilih will-change: filter terlebih dahulu sebelum melakukan animasi.

`filter: drop-shadow()` vs. `box-shadow`

box-shadow mengikuti kotak batas elemen (mengacu pada border-radius).
filter: drop-shadow() mengikuti piksel-piksel tidak transparan dari elemen tersebut, artinya ia menelusuri bentuk-bentuk clip-path, tingkat transparansi file PNG, serta lintasan SVG.

Untuk bayangan pada gambar yang telah dipotong atau gambar transparan, gunakan drop-shadow. Untuk kartu dan kotak standar, box-shadow lebih cepat.

Pertanyaan yang Sering Diajukan

Ya, filter diterapkan pada elemen dan seluruh anak elemennya secara bersamaan. Jika Anda menyaring elemen induk, semua anaknya juga akan tercakup. Untuk hanya menyaring latar belakang elemen induk, letakkan kontennya dalam konteks penumpukan yang terpisah atau gunakan backdrop-filter.

Karena efek kabur berlaku pada seluruh elemen termasuk teks yang ditampilkan, tidak ada cara untuk membuat latar belakang kabur sambil menjaga kejernihan teks menggunakan filter biasa. Gunakan backdrop-filter pada lapisan setengah transparan, dengan memastikan teks berada di luar elemen yang difilter.

Ya, semua fungsi filter dapat dianimasikan. Perhatikan kinerja efek kabur pada perangkat seluler, menganimasikan radius kabur terbukti cukup memakan sumber daya. grayscale, sepia, dan brightness dapat dianimasikan dengan biaya rendah.

Ya, CSS filter diterapkan pada elemen SVG dengan cara yang sama seperti elemen DOM lainnya. SVG juga memiliki sistem elemen <filter> yang lebih lengkap dan kaya fitur, namun jauh lebih rumit secara kode.

Generator Filter CSS

Cara membuat rangkaian filter

Masukkan nilai

Pahami skalanya

Buat CSS-nya

Salin aturannya

Periksa urutannya

Fungsi Filter

Urutan penggabungan sangat penting

Resep Umum

backdrop-filter untuk efek kaca buram

Catatan kinerja

filter: drop-shadow() vs. box-shadow

Pertanyaan yang Sering Diajukan

Alat Terkait

Referensi Tabel ASCII

Referensi Karakter HTML

Referensi pintasan papan ketik

Penghitung FPS

Generator Warna Acak

Pemilih Warna HEX

`filter: drop-shadow()` vs. `box-shadow`