⭐ 0
🔍
Teks Gambar PDF & Dokumen Audio Musik Elektronika Waktu Utilitas Validator Esoterik Game

Generator Filter CSS

Buat rantai fungsi CSS filter() dan backdrop-filter() yang bisa diatur ulang dan pratinjau secara langsung pada foto yang Anda unggah, lengkap dengan baris CSS yang bisa disalin dan ekspor PNG.

🔒 Diproses sepenuhnya di browser Anda — apa pun yang Anda masukkan di sini tidak akan pernah diunggah.

🖼️

Seret & Lepas Gambar Di Sini

atau Klik untuk Menelusuri file

Unggah foto di atas untuk melihat pratinjau rantai filter Anda di sini. Demo backdrop-filter kaca buram berfungsi meskipun tanpa foto.

Memproses... 0%

Hasil

Setiap generator filter CSS memungkinkan Anda menumpuk blur(), brightness(), contrast(), dan lainnya — tetapi hampir tidak ada yang membiarkan urutan menjadi penting, karena kebanyakan hanya menerapkan filter dalam satu urutan tetap. Yang ini berbeda: rantai filter adalah daftar nyata yang bisa diatur ulang, dibuat dengan seret dan lepas HTML5 asli, dan mengatur ulang dua fungsi benar-benar mengubah piksel yang dirender, persis seperti dalam CSS produksi. Blur-lalu-hue-rotate terlihat berbeda dari hue-rotate-lalu-blur, dan sekarang Anda bisa melihat alasannya sebelum Anda menerapkannya.

Unggah foto Anda sendiri dan sembilan fungsi yang dapat dirangkai — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert, dan drop-shadow — diterapkan langsung padanya sebagai deklarasi CSS `filter` aktual pada elemen `<img>`, bukan contoh yang disimulasikan. Tambahkan fungsi dari pilihan, seret barisnya ke atas atau ke bawah dalam daftar untuk mengubah posisinya dalam rantai, sesuaikan slider-nya, dan pratinjau serta baris `filter: ...;` yang dapat disalin diperbarui pada setiap masukan. Hapus langkah dengan tombolnya sendiri, tepat di baris tersebut.

Rantai kedua yang lebih kecil membangun nilai `backdrop-filter` yang diterapkan pada panel overlay yang ditempatkan di atas pratinjau, sehingga Anda dapat melihat efek kaca buram — teknik di balik bilah navigasi tembus pandang modern dan latar belakang modal — tanpa menyentuh rantai filter gambar dasarnya sendiri. Ini berfungsi bahkan sebelum Anda mengunggah foto, dengan latar belakang placeholder berwarna-warni, sehingga Anda dapat menyetel desain panel buram dalam hitungan detik.

Saat pratinjau terlihat tepat, salin CSS langsung dari kotak keluaran, atau ekspor PNG nyata: string filter yang sama diberikan ke properti `ctx.filter` konteks Canvas 2D — yang menggunakan sintaks identik dengan properti `filter` CSS — dan kanvas diubah menjadi file yang dapat diunduh dengan `canvas.toBlob()`. Gambar yang diekspor cocok persis dengan pratinjau langsung, karena dihasilkan oleh string filter yang sama yang berjalan melalui primitif rendering yang sama. Semuanya terjadi secara lokal di browser Anda; foto Anda tidak pernah diunggah ke mana pun.

Menikmati alat ini? Merasa produk ini bermanfaat? Melihat potensi di dalamnya dan ingin mendukungnya?

🛡️
Dijalankan di Browser

File dan masukan Anda tidak pernah meninggalkan perangkat ini. Pemrosesan berjalan sepenuhnya offline. 100% Aman.

Format & Aturan yang Diterima

  • Sembilan fungsi filter yang dapat dirangkai — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert, dan drop-shadow — masing-masing dengan slider dan pegangan seret bawaan.
  • Gambar pratinjau langsung dengan baris filter: CSS yang bisa disalin dan diperbarui secara instan, ditambah rantai backdrop-filter yang lebih kecil dan panel demo untuk tampilan kaca buram.
  • Ekspor PNG sekali klik merender foto yang diunggah melalui string filter yang sama persis dengan ctx.filter dari Canvas 2D, cocok dengan pratinjau di layar piksel demi piksel.

Manfaat Utama

✓ Penataan ulang dengan seret dan lepas benar-benar berfungsi: memindahkan filter lebih awal atau lebih akhir dalam rantai akan mengubah hasil yang dirender, sesuatu yang tidak dapat ditunjukkan oleh generator dengan urutan tetap.
✓ Pratinjau langsung berjalan pada foto Anda yang diunggah, bukan pada contoh umum, sehingga Anda bisa melihat persis bagaimana rantai filter bekerja pada konten nyata sebelum Anda menerapkan CSS-nya.
✓ Rantai backdrop-filter terpisah mendemonstrasikan efek kaca buram pada panel overlay, dan ekspor PNG menggabungkan string filter yang sama ke dalam gambar yang dapat diunduh melalui Canvas 2D.

Kasus Penggunaan

  • • Rangkai filter blur, brightness, dan hue-rotate pada foto produk, lalu seret hue-rotate ke depan blur untuk melihat perbedaan hasil render secara persis sebelum Anda menerapkan di CSS.
  • • Buat overlay bilah navigasi bergaya kaca buram dengan rantai backdrop-filter dan salin langsung baris backdrop-filter siap pakai beserta fallback -webkit-.
  • • Ekspor PNG hasil filter dari foto yang diunggah sesuai dengan pratinjau CSS langsung piksel demi piksel, tanpa mengunggah gambar ke server sama sekali.