Generator Filter CSS

Cara menggunakan

1. Sesuaikan slider filter: gunakan slider untuk mengontrol blur, kecerahan, kontras, saturasi, rotasi hue, opasitas, skala abu-abu, sepia, dan inversi.
2. Pratinjau real-time: gambar atau elemen contoh diperbarui seketika saat Anda menggerakkan slider.
3. Salin CSS: nilai properti filter lengkap (mis. filter: brightness(1.2) contrast(1.5) saturate(0.8)) siap untuk ditempel ke stylesheet Anda.

Mengapa menggunakan generator filter CSS?

Filter CSS memungkinkan Anda menerapkan efek pemrosesan gambar, blur, kontras, kecerahan, pergeseran warna, langsung di browser tanpa Photoshop atau perangkat lunak pengeditan gambar. Mereka berfungsi pada gambar, video, dan elemen HTML apa pun. Membangun rantai properti filter secara manual memerlukan pengetahuan nama fungsi yang tepat dan rentang nilai yang valid. Generator ini menawarkan slider intuitif dengan umpan balik visual untuk mendapatkan tampilan yang Anda inginkan dengan tepat.

Fitur

• Semua fungsi filter CSS: blur, brightness, contrast, saturate, hue-rotate, opacity, grayscale, sepia, invert, dan drop-shadow.
• Pratinjau langsung: lihat perubahan pada gambar contoh atau gambar Anda sendiri secara real-time.
• Validasi nilai: slider menerapkan rentang yang valid untuk setiap fungsi filter.
• Setel ulang individual: kembalikan satu filter ke nilai default tanpa memengaruhi yang lain.
• Keluaran gabungan: semua filter yang dipilih digabungkan menjadi satu rantai filter.

Pertanyaan umum

Bisakah filter CSS diterapkan pada video?

Ya. Properti filter CSS berfungsi pada elemen apa pun, termasuk <video>, <img>, <div>, dan <canvas>. Diterapkan pada video, filter dirender secara real-time selama pemutaran.

Apa perbedaan antara filter dan backdrop-filter?

filter menerapkan efek pada elemen itu sendiri dan semua anaknya. backdrop-filter menerapkan efek pada konten yang berada di belakang (di bawah) elemen, biasanya digunakan untuk efek kaca buram.

Apakah filter CSS memengaruhi kinerja?

Filter dengan blur atau compositing kompleks dapat berat untuk GPU. Untuk filter yang dianimasikan, pastikan elemen berada di lapisan compositing-nya sendiri (tambahkan transform: translateZ(0) sebagai petunjuk). Filter statis pada gambar dan ikon memiliki dampak minimal.

Apa yang sebenarnya dilakukan CSS filter

Properti CSS filter menerapkan efek grafis (blur, penyesuaian kontras, pergeseran warna, drop shadow) ke sebuah elemen dan anak-anaknya sebelum browser mengecatnya ke layar. Pemrosesan terjadi sepenuhnya dalam pipeline rendering browser, biasanya dipercepat GPU, tanpa JavaScript yang terlibat. Efeknya bersifat hanya visual: HTML dasar, file yang dirujuk oleh gambar, dan layout semua tidak berubah. Foto yang ditampilkan dengan filter: grayscale(1) masih memiliki warna aslinya di file; browser mengkonversi ke skala abu-abu hanya saat tampilan.

CSS filter mengekspos sepuluh fungsi: blur(px) untuk Gaussian blur, brightness(n) dan contrast(n) untuk penyesuaian tonal, saturate(n) untuk intensitas warna, hue-rotate(deg) untuk menggeser roda warna, opacity(n) untuk transparansi, grayscale(n) dan sepia(n) untuk efek desaturasi, invert(n) untuk output negatif, dan drop-shadow(...) untuk bayangan sadar bentuk (tidak seperti box-shadow, drop-shadow mengikuti bentuk yang sebenarnya dirender termasuk transparansi, ideal untuk bayangan pada ikon atau gambar PNG dengan tepi terpotong). Fungsi dapat dirangkai bersama: filter: brightness(1.2) contrast(1.3) saturate(0.9) menerapkan ketiganya secara berurutan.

Mengapa ini penting untuk desain web modern: satu dekade lalu, menyesuaikan kecerahan, hue, atau saturasi gambar untuk konsistensi desain memerlukan preprocessing setiap gambar di Photoshop dan mengekspor ulang. CSS filter membawa penyesuaian yang sama ke runtime, diterapkan secara non-destruktif. Anda dapat menyajikan satu gambar dan menampilkannya dengan cara yang berbeda berdasarkan tema, status hover, atau preferensi pengguna. Anda juga dapat menggunakan filter untuk aksesibilitas: foto skala abu-abu yang dibalik sebagai placeholder, atau overlay gambar yang digelapkan untuk keterbacaan teks kontras tinggi. Trade-off-nya adalah kinerja untuk beberapa filter (terutama blur) dan fakta bahwa filter mempengaruhi anak-anak juga, yang dapat mengaliri tak terduga.

Bagaimana alat ini bekerja di balik layar

Setiap slider di alat terikat ke satu fungsi filter. Saat Anda menggerakkan slider, JavaScript membaca nilainya, membangun string fungsi filter dengan nilai tersebut (misalnya, brightness(1.4)), dan menggabungkan semua fungsi aktif ke dalam satu string CSS filter. String tersebut diterapkan sebagai gaya inline pada gambar pratinjau, menghasilkan umpan balik visual segera saat browser melukis ulang dengan filter baru. Tidak ada data gambar yang diproses di JavaScript: matematika tingkat piksel yang sebenarnya terjadi di dalam mesin rendering browser, biasanya di GPU.

CSS yang dihasilkan yang ditampilkan di kotak kode adalah string yang sama yang diterapkan pada pratinjau. Klik Salin CSS dan alat menulis string tersebut ke clipboard Anda menggunakan API modern navigator.clipboard.writeText(). String siap untuk ditempelkan ke atribut gaya elemen mana pun atau deklarasi kelas mana pun dalam stylesheet Anda. Alat ini juga mendukung memuat gambar Anda sendiri: pilih file dan itu menjadi URL blob: sementara di browser, tidak pernah diunggah ke mana pun, dan filter melihat pratinjau pada gambar Anda yang sebenarnya sehingga Anda dapat menyetel tampilan yang tepat untuk konten Anda.

Perilaku reset adalah per-filter: setiap slider memiliki tombol resetnya sendiri yang mengembalikan filter itu ke nilai tanpa efek (1 untuk pengganda, 0deg untuk hue-rotate, 0px untuk blur). Tombol Reset Semua mengembalikan setiap slider ke netral secara bersamaan. Status alat hanya tinggal di memori; muat ulang halaman dan kombinasi filter Anda hilang. Tidak ada server yang menyimpan nilai filter yang Anda pilih, tidak ada analitik yang melacak kombinasi mana yang Anda coba. Alat ini adalah taman bermain CSS yang stateless dan didukung iklan.

Sejarah singkat filter CSS

• Primitif filter SVG, 2001.SVG 1.0 (Rekomendasi W3C, September 2001) mendefinisikan sistem filter yang komprehensif: feGaussianBlur, feColorMatrix, feConvolveMatrix, dan puluhan lainnya. Model filter SVG kuat tetapi bertele-tele, dan menerapkan filter SVG ke elemen HTML memerlukan filter: url(#id) yang merujuk pada SVG inline, tidak pernah diadopsi secara luas dalam alur kerja HTML-first.
• CSS Filter Effects Module Level 1, 2014.W3C menerbitkan Filter Effects Module Level 1 (Desember 2014), memperkenalkan fungsi filter shorthand yang disederhanakan (blur, brightness, contrast, dll.) yang tidak memerlukan SVG inline. Ini cocok dengan kebutuhan pemrosesan gambar yang paling umum dalam 95% kasus dan jauh lebih mudah ditulis daripada filter SVG.
• Dukungan browser mencapai massa kritis, 2015.Chrome 53 (2015) dan Firefox 35 (2015) mengirimkan dukungan filter tanpa prefiks; Safari memiliki dukungan dengan prefiks sejak versi 6 (2012). Pada 2015, CSS filter dapat digunakan secara luas di situs produksi. Desainer mulai menggunakan filter untuk efek hover, normalisasi gambar, dan perawatan dekoratif dalam skala besar.
• backdrop-filter dirilis, 2017 hingga 2024.Safari 9 (2015) memperkenalkan -webkit-backdrop-filter untuk efek kaca buram. Chromium mengirimkan backdrop-filter tanpa prefiks di Chrome 76 (Juli 2019). Firefox menahan hingga versi 103 (Juli 2022). Bar navigasi buram gaya iOS menjadi pola UI modern default.
• Mode gelap mendorong adopsi filter, 2019.Tren desain mode gelap (macOS Mojave Apple 2018, Android 10 2019, iOS 13 2019, browser prefers-color-scheme 2019) mempercepat penggunaan filter untuk CSS auto dark mode invert-and-hue-rotate, di mana aturan tunggal filter: invert(1) hue-rotate(180deg) mengubah situs mode terang menjadi tampilan mode gelap yang dapat diterima tanpa desain ulang.
• Kompleksitas filter SVG kembali melalui CSS, 2024 dan seterusnya.CSS Filter Effects Module Level 2 (draft) mengusulkan fungsi baru dan kemampuan untuk menyusun pipeline filter kustom tanpa SVG inline, menjembatani kesenjangan antara fungsi shorthand yang nyaman dan kekuatan penuh primitif filter SVG. Dukungan browser masih bergulir hingga 2025.

Alur kerja dunia nyata

• Normalisasi gambar yang konsisten dengan brand.Sebuah situs yang mengambil gambar dari banyak fotografer atau penyedia stok mendapatkan saturasi, kontras, dan kecerahan yang tidak konsisten. Menerapkan filter CSS seragam ke semua gambar (filter: saturate(0.85) contrast(1.05) brightness(0.95)) membawa semuanya ke palet warna yang sama tanpa memproses awal setiap file. Balikkan filter untuk gambar tertentu ketika Anda ingin itu menonjol.
• Status hover dan interaksi.Efek hover menggunakan transisi filter terasa halus dan ringan. Gambar kartu dengan filter: grayscale(0.5) saat istirahat dan filter: grayscale(0) saat hover menciptakan undangan halus untuk berinteraksi. Thumbnail gambar dengan filter: brightness(0.9) saat istirahat dan brightness(1.1) saat hover melakukan hal yang sama tanpa memerlukan dua file gambar.
• UI kaca buram dengan backdrop-filter.Overlay modal, bar navigasi sticky, dan popover tooltip menggunakan backdrop-filter: blur(20px) di atas latar belakang semi-transparan menghasilkan efek kaca-buram gaya iOS. Ini sekarang diharapkan di situs pemasaran modern; filter tidak berlaku karena kita ingin mengaburkan apa yang ada di belakang overlay, bukan overlay itu sendiri.
• Theming dinamis dan mode gelap.Mode gelap murah: bungkus situs Anda dalam kontainer dengan filter: invert(1) hue-rotate(180deg) diaktifkan melalui media query atau toggle. Ini mengonversi teks gelap menjadi terang, latar belakang terang menjadi gelap, sambil mempertahankan sebagian besar warna. Ini adalah kemenangan cepat yang menangani 80% persyaratan mode gelap tanpa mendesain dua tema. Gambar nyata harus dikecualikan dengan filter: invert(1) hue-rotate(180deg) bersarang untuk membatalkan inversi, jika tidak foto terlihat aneh.
• Alat aksesibilitas dan mode kontras tinggi.Pengguna dengan gangguan penglihatan dapat menerapkan filter tingkat browser (ekstensi kontras tinggi Chrome, inversi tingkat OS) tetapi desainer juga dapat menawarkan toggle filter tingkat situs: tombol yang menerapkan filter: contrast(2) ke seluruh halaman untuk pengguna penglihatan rendah. WebAIM dan WCAG tidak mensyaratkan ini, tetapi ini adalah kesopanan aksesibilitas berbiaya rendah yang ditambahkan beberapa situs.
• Perawatan foto artistik.Nada sepia, tampilan vintage, efek foto blueprint, dan perawatan artistik lainnya menggabungkan fungsi filter: filter: sepia(1) hue-rotate(200deg) saturate(1.5) brightness(0.8) menghasilkan tampilan vintage bernada dingin dalam satu deklarasi. Dibandingkan dengan preset editor gambar, CSS filter bersifat non-destruktif dan dapat disesuaikan secara langsung tanpa mengekspor ulang.

Jebakan umum dan artinya

• Blur adalah filter yang mahal.Di antara fungsi filter, blur() adalah yang paling intensif GPU, terutama pada radii besar (di atas 20px) pada elemen besar. Menganimasikan blur atau menerapkannya pada banyak elemen secara bersamaan dapat menjatuhkan frame rate secara nyata. Untuk bar navigasi buram sticky, blur mencakup area kecil dan berjalan dengan baik; untuk blur modal layar penuh, harapkan kegagapan singkat pada perangkat kelas bawah. Filter lain (contrast, brightness, saturate) hampir gratis pada GPU modern.
• Filter mempengaruhi semua keturunan.Menerapkan filter ke kontainer mempengaruhi setiap elemen anak di dalamnya. Jika Anda membungkus kartu dalam kontainer dengan filter: grayscale(1), teks di dalamnya juga menjadi skala abu-abu (yang biasanya tidak mengubah apa pun karena teks sudah monokromatik) dan elemen anak berwarna apa pun (ikon, badge) kehilangan warnanya. Untuk memfilter hanya anak tertentu, terapkan filter pada mereka secara individual, bukan pada induk.
• Kontras rendah merugikan keterbacaan.Mengurangi kontras (filter: contrast(0.5)) pada kartu dengan teks di dalamnya membuat teks lebih sulit dibaca, sering menjatuhkannya di bawah rasio kontras WCAG AA 4.5:1 untuk teks normal. Terapkan filter pengurang kontras dengan hati-hati; periksa bahwa teks apa pun di atas tetap terbaca. Untuk elemen hanya dekoratif (gambar latar, pembatas), kontras yang dikurangi baik-baik saja.
• Filter tidak mengubah area hit.Tidak seperti clip-path, CSS filter tidak mengubah area yang dapat diklik dari sebuah elemen. Tombol dengan filter: blur(5px) terlihat lembut dan tidak fokus tetapi masih sepenuhnya dapat diklik di seluruh persegi panjang aslinya. Ini biasanya diinginkan tetapi bisa mengejutkan ketika elemen ghosted atau disabled-looking masih memicu klik. Gabungkan filter dengan pointer-events: none untuk benar-benar menonaktifkan interaksi.
• Safari membutuhkan prefiks -webkit- untuk backdrop-filter.Properti dasar filter tanpa prefiks di semua browser modern. Tetapi backdrop-filter masih memerlukan prefiks -webkit-backdrop-filter di Safari (termasuk versi yang lebih baru). Untuk efek kaca buram lintas browser, deklarasikan baik -webkit-backdrop-filter dan backdrop-filter dengan nilai yang sama. Auto-prefixer menangani ini; jika Anda menulis CSS dengan tangan, ingat prefiks.
• Menganimasikan rantai filter melompat-lompat.Transisi CSS pada filter berinterpolasi dengan mulus ketika rantai filter tetap sama (misalnya, transisi blur(0px) ke blur(10px)). Tetapi menambahkan atau menghapus fungsi di tengah transisi (misalnya, transisi dari blur(0px) ke blur(10px) brightness(1.2)) snap tiba-tiba. Untuk transisi multi-filter yang mulus, deklarasikan semua filter di status awal dan akhir dengan nilai dasar yang sesuai (brightness(1) adalah default).

Privasi: semuanya terjadi di browser Anda

Alat generator CSS hadir dalam dua rasa: halaman HTML sederhana yang menjalankan JavaScript sisi klien (pribadi, cepat) dan editor cloud yang menyimpan proyek Anda (kolaboratif tetapi dengan trade-off privasi). Alat ini adalah jenis pertama. Nilai slider Anda, CSS yang dihasilkan Anda, dan bahkan gambar apa pun yang Anda unggah untuk pratinjau tetap sepenuhnya di sesi browser Anda. Muat ulang halaman dan statusnya hilang kecuali Anda menyalin CSS terlebih dahulu atau menyimpan screenshot.

Fitur unggah gambar Anda sendiri layak mendapat catatan privasi: ketika Anda memilih file, browser membuat URL blob: lokal yang menunjuk ke memori, dan pratinjau menampilkan gambar Anda dengan filter diterapkan. Tidak ada permintaan yang masuk ke server mana pun. Buka tab Network browser saat mengunggah; Anda akan melihat nol lalu lintas keluar. Gambar hanya ada di memori tab browser Anda dan dihapus saat Anda menutup tab. Untuk gambar rahasia (desain proprietary, scan medis, screenshot yang dilindungi NDA), inilah properti privasi yang penting.

Saat alat lain adalah pilihan yang tepat

• Photoshop atau Lightroom untuk pengeditan permanen.CSS filter hanya pada waktu tampilan: file gambar dasar tidak berubah. Jika Anda ingin file gambar yang sebenarnya memiliki penyesuaian tersebut tertanam (ukuran file lebih kecil, pemuatan halaman lebih cepat, tidak ada risiko fallback tidak difilter di browser yang lebih lama), edit gambar di Photoshop, Lightroom, GIMP, atau Affinity Photo. CSS filter untuk tampilan dinamis; editor gambar untuk pemrosesan permanen.
• Image Filters untuk pemrosesan batch satu kali.Alat Image Filters kami menerapkan efek filter serupa tetapi menghasilkan PNG/JPG yang dapat diunduh dengan filter tertanam. Untuk memproses banyak gambar secara konsisten untuk portofolio, set media sosial, atau perpustakaan aset, alur kerja itu lebih cepat daripada menerapkan filter CSS pada runtime. Kedua alat melayani kasus penggunaan yang berbeda.
• Filter SVG untuk efek kompleks.Shorthand CSS filter mencakup sebagian besar kebutuhan tetapi tidak semuanya. Distorsi bergelombang, kernel konvolusi kustom (deteksi tepi, embossing), pola noise feTurbulence, peta displacement: semua memerlukan primitif filter SVG melalui SVG inline plus filter: url(#myFilter). Menulis filter SVG lebih sulit tetapi membuka kunci efek yang tidak dapat dihasilkan oleh shorthand CSS filter.
• Properti kustom CSS untuk theming.Trik invert dark mode menggunakan filter memiliki batasan: foto terlihat salah, warna bergeser, kinerja dapat menderita. Untuk mode gelap kualitas produksi, properti kustom CSS (--bg-color, --text-color) dengan dua set tema yang berbeda lebih bersih. Mode gelap berbasis filter adalah kemenangan cepat, bukan solusi yang dipoles.

Pertanyaan umum lainnya

Dapatkah saya menganimasikan perubahan CSS filter dengan mulus?

Ya, dengan peringatan. Properti filter dapat dianimasikan dalam CSS, dan transisi antara dua rantai filter dengan fungsi yang sama dalam urutan yang sama berinterpolasi dengan mulus (blur(0px) brightness(1) ke blur(10px) brightness(1.5) berfungsi). Menambah atau menghapus fungsi di tengah transisi snap tiba-tiba. Untuk animasi multi-filter yang mulus, daftar setiap fungsi yang ingin Anda transisikan baik di status awal maupun akhir, menggunakan nilai netral (brightness(1), saturate(1), blur(0px)) di mana Anda tidak ingin filter spesifik diterapkan.

Apakah CSS filter berfungsi pada gambar latar belakang?

Ya. CSS filter berlaku untuk seluruh elemen termasuk gambar latar belakang, konten, dan elemen anaknya. Jika Anda ingin memfilter hanya gambar latar belakang tetapi bukan konten foreground, pendekatan tipikal adalah menggunakan elemen anak terpisah untuk latar belakang (misalnya, pseudo-element ::before yang diposisikan) dengan filter diterapkan padanya, lalu menempatkan konten sebagai saudara tidak difilter di atas. Properti backdrop-filter juga berguna ketika Anda ingin memfilter apa yang terlihat di belakang elemen transparan.

Apakah filter CSS diindeks oleh mesin pencari?

Filter CSS murni visual dan tidak mengubah konten HTML. Mesin pencari mengindeks konten dasar (alt text gambar, teks sekitarnya) seolah-olah filter tidak diterapkan. Gambar skala abu-abu dengan filter: grayscale(1) masih diindeks sebagai gambar warna asli berdasarkan filenya dan alt text. Ini umumnya yang Anda inginkan: tidak ada efek samping filter pada SEO atau pembaca layar.

Mengapa drop-shadow terlihat berbeda dari box-shadow?

Box-shadow menggambar bayangan di sekitar kotak persegi panjang sebuah elemen, mengabaikan transparansi apa pun. Drop-shadow (filter) menggambar bayangan yang mengikuti bentuk yang sebenarnya dirender, termasuk daerah transparan. Untuk ikon SVG dengan tepi terpotong atau PNG dengan transparansi, drop-shadow menghasilkan bayangan sadar bentuk yang cocok dengan garis luar yang terlihat. Box-shadow pada elemen yang sama akan menampilkan bayangan persegi panjang di sekitar bounding box, yang terlihat salah. Gunakan drop-shadow untuk bayangan sadar bentuk, box-shadow untuk elemen persegi panjang.

Apa perbedaan antara opacity dan filter: opacity()?

Di sebagian besar browser mereka menghasilkan hasil yang identik secara visual. Perbedaan teknisnya: opacity adalah properti tingkat atas, sementara filter: opacity() adalah bagian dari rantai filter dan menyusun dengan filter lain. Jika Anda memiliki filter: blur(5px) opacity(0.5), keduanya berlaku bersama sebagai operasi GPU tunggal. Menggunakan opacity di luar rantai filter berfungsi sama dalam sebagian besar kasus. Tetap dengan opacity untuk transparansi mandiri; gunakan filter: opacity() hanya saat merangkai dengan filter lain.

Dapatkah saya mereset semua filter dengan cepat?

Ya. Atur filter: none untuk menghapus semua filter dalam satu deklarasi. Ini adalah cara paling bersih untuk mereset, terutama untuk status hover di mana Anda ingin menghapus semua efek filter saat hover-out. Atau, atur setiap fungsi filter ke nilai netralnya: filter: brightness(1) contrast(1) saturate(1) blur(0px) hue-rotate(0deg) grayscale(0) sepia(0) invert(0) opacity(1) secara fungsional setara dengan filter: none tetapi lebih bertele-tele.