CSS Filter Generator – Blur, Kecerahan, Grayscale

Geser slider, maka pratinjau dan kode filternya langsung ikut berubah.

Teks dan file Anda tetap di browser — tidak ada yang dikirim ke server.

Seret file ke sini atau klik untuk memilih
Kode CSS

Cara pakai

  1. Gambar contoh sudah dimuat. Untuk memakai gambar sendiri, seret file-nya ke area di bawah.
  2. Geser slider atau pilih preset, efeknya langsung diterapkan. Pengaturan yang masih bernilai bawaan tidak ditulis di kode.
  3. Tahan tombol berbentuk mata untuk membandingkan dengan gambar tanpa filter.
  4. Salin kode CSS-nya, atau di browser yang mendukung, simpan PNG dengan filter terpasang lewat tombol "Unduh".

Pertanyaan umum

Apakah urutan fungsi filter berpengaruh?

Ya. Filter diterapkan dari kiri ke kanan, jadi urutan yang berbeda memberi hasil yang berbeda. Alat ini selalu menuliskannya dengan urutan yang sama.

Apa beda drop-shadow dan box-shadow?

box-shadow menggambar bayangan di sekeliling kotak persegi elemen, sedangkan drop-shadow mengikuti bentuk yang benar-benar terlihat dan mengabaikan area transparan. Cocok untuk PNG transparan dan ikon.

Kenapa tidak ada tombol "Unduh"?

Tombol itu disembunyikan di browser yang tidak mendukung filter pada canvas, seperti beberapa versi Safari. Kode CSS-nya tetap bisa disalin dan dipakai.

Alat serupa

Semua alat