Generator CSS Filter

Gabungkan fungsi CSS filter (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow) pada gambar contoh atau gambar Anda sendiri.

Preset

Fungsi filter

Bayangan jatuh

Gambar

Gambar Anda hanya ditampilkan secara lokal dan tidak pernah diunggah.

Pratinjau

Asli
Asli
Terfilter
Terfilter
Kode CSS
filter: none;

Alat Terkait

Lihat Semua
Generator CSS Box Shadow Generator CSS Gradient Generator CSS Flexbox Generator CSS Grid Generator Border Radius Generator Glassmorphism Generator Neumorphism Generator Text Shadow

Apa itu Generator CSS Filter?

Menerapkan properti CSS filter pada gambar secara langsung. Gabungkan blur, kecerahan, kontras, skala abu-abu, rotasi rona, inversi, opasitas, saturasi, sepia, dan drop-shadow, bandingkan hasilnya dengan aslinya, lalu salin kodenya. Anda bisa memakai gambar contoh bawaan atau memuat gambar sendiri, yang tetap berada di perangkat Anda.

Cara menggunakan Generator CSS Filter

  1. Pilih preset (Hitam putih, Vintage, Hangat, Sejuk, Dramatis…) atau mulai dari Tanpa.
  2. Geser slider untuk setiap fungsi filter.
  3. Aktifkan drop-shadow() dan atur offset, blur, warna, dan opasitasnya jika perlu.
  4. Klik Gunakan gambar sendiri untuk menguji dengan file lokal.
  5. Salin kode CSS-nya.

Contoh

Masukan
blur 2px, brightness 120%, hue-rotate -90°, sepia 50%, drop-shadow on (4px 4px 6px, black at 0.5)
Keluaran
filter: blur(2px) brightness(120%) hue-rotate(-90deg) sepia(50%) drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));

Kapan menggunakan Generator CSS Filter

Gunakan untuk efek hover gambar, gaya foto yang konsisten, latar yang diredupkan, dan bayangan yang mengikuti bentuk PNG/SVG transparan (drop-shadow). Alat ini tidak mengubah file gambarnya; untuk perubahan permanen, gunakan editor gambar atau alat gambar di situs ini. Untuk memengaruhi apa yang ada di belakang elemen, bukan elemennya, gunakan backdrop-filter (lihat Generator Glassmorphism).

Cara kerja Generator CSS Filter

Hanya fungsi yang berbeda dari nilai netralnya yang ditulis (misalnya brightness dihilangkan pada 100%), dalam urutan tetap: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow. Urutan penting di CSS karena setiap fungsi diterapkan pada output fungsi sebelumnya. Jika tidak ada yang diubah, outputnya filter: none;. Gambar Anda ditampilkan lewat object URL lokal dan tidak pernah diunggah.

Kasus Penggunaan Umum

  • Efek hover dari abu-abu ke berwarna pada logo
  • Gaya foto vintage atau hangat di galeri
  • Meredupkan gambar hero di bawah teks
  • Bayangan di sekitar ikon PNG transparan dengan drop-shadow()
  • Pratinjau cepat ala buta warna dengan hue-rotate

Catatan Keamanan

Gambar yang Anda muat hanya ditampilkan secara lokal di browser Anda dan tidak diunggah.

Pertanyaan Umum

Apa bedanya drop-shadow() dan box-shadow?

drop-shadow() mengikuti piksel elemen yang terlihat (termasuk transparansi), sedangkan box-shadow selalu mengikuti kotak persegi elemen.

Mengapa urutan filter penting?

Setiap fungsi memproses hasil fungsi sebelumnya, sehingga misalnya sepia setelah grayscale menghasilkan warna berbeda dibanding grayscale setelah sepia.

Apakah gambar yang saya unggah dikirim ke mana pun?

Tidak. Gambar ditampilkan dari blob URL lokal di browser Anda.

Jelajahi kategori lainnya

CRC
Algoritma Cyclic Redundancy Check untuk deteksi kesalahan
MD
Algoritma Message Digest (MD2, MD4, MD5)
SHA-1
Secure Hash Algorithm 1 - fungsi hash 160-bit
SHA-2
Keluarga Secure Hash Algorithm 2 (SHA-224, SHA-256, SHA-384, SHA-512)