Softonic

Generator Filter CSS

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. 1

    Masukkan nilai

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

  2. 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. 3

    Buat CSS-nya

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

  4. 4

    Salin aturannya

    Salin hasilnya dan tempel ke stylesheet Anda.

  5. 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.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Generator Tabel Markdown

Buat tabel Markdown secara visual atau tempelkan file berformat CSV/TSV. Atur penjajaran kolom, pengisian ruang kosong (padding), dan baris kepala; kemudian salin hasil tampilan Markdown yang telah diatur tersebut.

JSON ke YAML

Konversi JSON ke YAML dengan penjelajaran yang tepat, penutupan string yang aman, skalar blok berbaris ganda, serta kunci yang tersortir untuk konfigurasi yang lebih rapi.

Generator Konfigurasi Nginx

Buat server block Nginx dengan TLS, HTTP/2, gzip, cache browser, dan aturan reverse proxy hanya dari sebuah formulir sederhana.

Markdown ke Slide

Ubah Markdown menjadi rangkaian slide dengan pemisah `---`, catatan pembicara, serta ekspor ke HTML atau PDF. Didukung oleh Reveal.js.

Alat ini tersedia dalam bahasa lain