devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Audit Situs

Generator CSS Filter — Efek Gambar & Warna ke Filter

Atur blur, brightness, contrast, saturation, hue, grayscale, sepia, invert dan drop shadow pada contoh atau gambarmu sendiri, lalu salin CSS filter-nya. Butuh ikon SVG atau PNG dengan warna brand? Warna ke filter mengubah kode warna hex apa pun menjadi filter yang mewarnai ulang ikon hitam.

Diperbarui
Pratinjau gambar

CSS


  

  


    
 Data kamu tidak pernah meninggalkan komputer kamu. Semua proses berjalan 100% secara lokal di browser kamu.
Apakah alat ini membantu?0.0 0 penilaian

    
    
    Konverter warna online gratisUbah HEX ke RGB, HSL, HWB, OKLCH, CMYK, dan nama warna CSS, lalu buat palet tint & shade 50–950 sebagai variabel CSS.Konverter Warna →
    
    

      
Cara menggunakan Generator CSS Filter
  1. Efek gambar: geser slider (atau pilih preset) dan lihat hasilnya di pratinjau. Klik Pakai gambar saya untuk mencobanya di fotomu sendiri — gambar tetap tersimpan di perangkatmu.
  2. Warna hex ke filter: masukkan warna seperti #4f46e5. Tool ini akan menemukan filter yang mengubah ikon hitam menjadi warna tersebut.
  3. Salin CSS-nya dan terapkan ke <img>, SVG, atau elemen apa pun.


Fungsi filter CSS


FungsiEfekDefault


blur(4px)Blur Gaussian0


brightness(120%), contrast(110%)lebih terang/gelap, kontras lebih tinggi/rendah100%


saturate(150%), grayscale(100%)warna lebih pekat/pudar100%, 0


hue-rotate(90deg)menggeser semua warna di roda warna0deg


sepia(60%), invert(100%)nuansa cokelat hangat, negatif0


drop-shadow(0 8px 12px #0006)bayangan yang mengikuti transparansi gambarnone




Filter dijalankan berurutan dari kiri ke kanan, jadi grayscale(100%) sepia(60%) hasilnya berbeda dengan urutan terbalik.


Mewarnai ulang ikon dengan filter
Kamu tidak bisa mengatur color pada <img src="icon.svg">, tapi kamu bisa memfilternya. Mulai dari hitam, rangkaian seperti invert() sepia() saturate() hue-rotate() brightness() contrast() bisa mencapai hampir semua warna; tool ini mencari nilai dengan selisih warna terkecil yang terlihat. Jika kamu mengontrol SVG-nya, fill="currentColor" lebih sederhana — SVG optimizer bisa melakukannya untukmu.
Juga dicari sebagai: hex ke css filter, warna ke filter css, ubah warna svg css filter, css filter gambar, css filter brightness contrast, css grayscale, filter hitam ke warna css.
Tool yang cocok dipakai bersama Generator CSS Filter
  • Konverter Warna — Tempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung dapatkan format lainnya, plus palet siap pakai 50–950.
  • Generator Border Radius — Bulatkan sudut kotak mana pun: geser satu slider untuk semua sudut atau atur tiap sudut secara terpisah, beralih ke sudut elips untuk bentuk blob dan daun, lalu salin CSS border-radius terpendek yang valid.
  • Generator Box Shadow — Tumpuk beberapa lapis bayangan, atur offset, blur, spread dan opacity langsung di kartu pratinjau, lalu salin CSS box-shadow atau text-shadow.
  • Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
Pertanyaan yang sering diajukan
Bagaimana cara mengubah warna ikon SVG atau PNG dengan CSS?
Jika ikonnya hitam, gunakan Warna hex ke filter: masukkan warnamu lalu terapkan filter yang dihasilkan ke img. Untuk SVG inline, atur fill="currentColor" dan gunakan properti CSS color.
Kenapa warna filter tidak tepat sama?
Filter hanya bisa mendekati beberapa warna. Tool ini menampilkan selisihnya; jalankan pencarian lagi untuk hasil yang lebih mirip. Hasil bertanda “Perfect” tidak bisa dibedakan oleh mata.
Apakah filter CSS berfungsi di semua elemen?
Ya — gambar, video, SVG, teks, dan seluruh bagian halaman. Perlu diingat, filter membuat stacking context baru dan bisa memengaruhi performa pada area yang sangat besar.
Apa perbedaan box-shadow dan drop-shadow?
box-shadow mengikuti kotak elemen; filter: drop-shadow mengikuti piksel yang terlihat, sehingga pas dengan bentuk PNG dan SVG yang transparan.
Bisakah saya memasang Generator CSS Filter sebagai aplikasi web dan memakainya offline?
Bisa. Generator CSS Filter adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.

      
    

    
    
Tool terkait
localKonverter WarnaTempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung…localGenerator Border RadiusBulatkan sudut kotak mana pun: geser satu slider untuk semua sudut atau atur tiap sudut secara terpisah,…localGenerator Box ShadowTumpuk beberapa lapis bayangan, atur offset, blur, spread dan opacity langsung di kartu pratinjau, lalu…localOptimizer SVGBersihkan SVG hasil ekspor dari Figma, Illustrator, Inkscape, atau Sketch dengan SVGO, lalu cek pratinjau…localGenerator Gradient CSSRancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu…localKompres GambarPerkecil foto dan grafis hingga 90% tanpa penurunan kualitas yang terlihat, tergantung gambar dan…