Pembuat Filter CSS

Setiap generator filter CSS memungkinkan Anda menumpuk blur(), kecerahan(), kontras() dan lainnya — namun hampir tidak ada yang membiarkan urutannya penting, karena sebagian besar hanya menerapkan filter dalam satu urutan tetap. Yang ini berbeda: rantai filter adalah daftar nyata yang dapat disusun ulang yang dibuat dengan drag-and-drop HTML5 asli, dan pengurutan ulang dua fungsi benar-benar mengubah piksel yang dirender, persis seperti yang terjadi di CSS produksi. Blur-lalu-hue-rotate terlihat berbeda dari hue-rotate-then-blur, dan sekarang Anda dapat mengetahui alasannya sebelum mengirimkannya.

Unggah foto Anda sendiri dan sembilan fungsi yang dapat dirangkai — blur, kecerahan, kontras, saturasi, rotasi rona, sepia, skala abu-abu, invert, dan drop-shadow — terapkan secara langsung sebagai deklarasi `filter` CSS aktual pada elemen `<img>`, bukan contoh simulasi. Tambahkan fungsi dari pilihan, seret barisnya ke atas atau ke bawah daftar untuk mengubah posisinya dalam rantai, sesuaikan penggesernya, dan pratinjau serta pembaruan baris `filter: ...;` yang dapat disalin pada setiap masukan. Hapus satu langkah dengan tombolnya sendiri, tepat di baris tersebut.

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

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