Generator Backdrop Filter

• 9 kontrol filter yang dapat disesuaikan: atur dengan halus setiap properti CSS backdrop-filter — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, dan sepia. Setiap filter memiliki slider khusus dengan nilai langkah presisi dan umpan balik real-time saat Anda menyesuaikan.
• Pratinjau visual langsung: lihat efek setiap penyesuaian seketika pada konten contoh dengan latar gradien penuh warna. Kartu pratinjau menunjukkan persis bagaimana backdrop-filter mengubah konten di bawahnya, memudahkan Anda mencapai tampilan yang sempurna.
• 6 kombinasi preset: mulai desain Anda dengan preset siap pakai — Blur Lembut, Kaca Buram, Vintage, Kontras Tinggi, Skala Abu-abu, dan Terbalik. Setiap preset menggabungkan beberapa filter untuk langsung menciptakan efek visual populer.
• 100% privat & gratis: semua pemrosesan terjadi secara lokal di browser Anda. Tidak ada data yang dikirim ke server mana pun, tanpa pendaftaran, dan tanpa batas penggunaan. CSS yang dihasilkan siap disalin dan tempel langsung ke proyek Anda — sepenuhnya gratis selamanya.

• Panel UI kaca buram: buat efek kaca buram (glassmorphism) yang populer untuk bilah navigasi, panel samping, modal, dan kartu. Gabungkan blur dengan sedikit penyesuaian kecerahan dan saturasi untuk tampilan seperti kaca yang realistis dan menambah kedalaman antarmuka Anda.
• Keterbacaan teks di atas latar: tingkatkan keterbacaan teks di atas latar dan gambar yang ramai dengan menerapkan penyesuaian blur atau kecerahan di belakang overlay teks. Backdrop-filter menjaga konten Anda tetap terbaca tanpa sepenuhnya menutupi latar.
• Latar modal & dialog: desain overlay modal yang elegan dengan efek blur latar pada konten halaman di belakang dialog. Ini memusatkan perhatian pada modal sambil tetap memperlihatkan konteks halaman.
• Header navigasi lengket: terapkan blur latar yang halus pada header lengket dan bilah navigasi yang bergulir di atas konten. Ini menciptakan efek header transparan yang elegan dan populer di desain web modern, sambil menjaga konten di bawahnya tetap terlihat.
• Navigasi laci seluler: percantik laci samping seluler dan bottom sheet dengan efek backdrop-filter. Latar yang terfilter membantu pengguna fokus pada konten navigasi sambil tetap menjaga kesadaran posisi halaman utama di bawahnya.
• Prototipe komponen UI: buat prototipe dan bereksperimen dengan berbagai kombinasi backdrop-filter selama fase desain. Pratinjau bagaimana berbagai nilai filter memengaruhi tampilan komponen Anda sebelum menulis CSS produksi.

Properti CSS backdrop-filter memungkinkan Anda menerapkan efek grafis — seperti blur, perubahan warna, atau penyesuaian kontras — pada area di belakang sebuah elemen . Berbeda dari filter yang memengaruhi elemen itu sendiri, backdrop-filter memengaruhi segala sesuatu di belakang elemen, membuatnya ideal untuk menciptakan permukaan transparan seperti kaca tempat konten di bawahnya tetap terlihat sebagian.

Diperkenalkan dalam modul CSS Filter Effects Module Level 2, backdrop-filter didukung luas di browser modern termasuk Chrome, Firefox, Safari, dan Edge. Properti ini menjadi pilar tren desain glassmorphism, memungkinkan antarmuka berlapis yang kaya tanpa aset gambar berat atau solusi rumit.

Generator kami menyediakan antarmuka visual untuk membuat CSS backdrop-filter tanpa menulis kode. Berikut cara kerjanya:

1. Pilih titik awal — ambil salah satu kombinasi preset (Blur Lembut, Kaca Buram, Vintage, dan lainnya) atau mulai dari nol dengan menyesuaikan filter satu per satu. Setiap preset menerapkan kumpulan nilai filter yang dirancang untuk efek visual tertentu.
2. Sesuaikan filter satu per satu — gunakan sembilan slider khusus untuk menyetel setiap properti filter secara independen. Filter yang aktif ditandai dengan titik indikator, dan mengklik label nilainya akan mengembalikan filter tersebut ke nilai bawaan. Pratinjau langsung diperbarui seketika pada setiap penyesuaian.
3. Salin keluaran CSS — setelah puas dengan hasilnya, klik tombol Salin CSS untuk menyalin deklarasi lengkap termasuk versi berprefiks vendor untuk dukungan Safari. Tempelkan langsung ke stylesheet Anda.

• blur(px): menerapkan blur Gaussian pada latar dengan radius yang ditentukan dalam piksel. Nilai 0 berarti tanpa blur. Nilai yang umum dipakai berkisar dari 2 px (halus) hingga 20 px (sangat buram).
• brightness(%): menyesuaikan kecerahan latar. 100% adalah gambar asli, 0% menghasilkan hitam total, dan nilai di atas 100% menambah kecerahan.
• contrast(%): menyesuaikan kontras latar. 100% membiarkan gambar tidak berubah, 0% menghasilkan gambar sepenuhnya abu-abu, dan nilai di atas 100% menciptakan kontras lebih tinggi.
• grayscale(%): mengubah latar menjadi skala abu-abu. 0% adalah warna penuh, 100% sepenuhnya skala abu-abu. Nilai di antaranya mengontrol intensitas pengurangan saturasi.
• hue-rotate(deg): menerapkan rotasi hue pada latar. 0deg membiarkan gambar tidak berubah, 360deg berarti satu putaran penuh pada roda warna.
• invert(%): membalik warna latar. 0% membiarkan gambar tidak berubah, 100% sepenuhnya membalik warna. 50% menghasilkan abu-abu netral.
• opacity(%): mengontrol transparansi latar. 100% sepenuhnya opak, 0% sepenuhnya transparan. Perhatikan bahwa ini hanya memengaruhi latar, bukan elemennya sendiri.
• saturate(%): menyesuaikan saturasi latar. 100% membiarkan gambar tidak berubah, 0% sepenuhnya tanpa saturasi, dan nilai di atas 100% menghasilkan warna yang sangat jenuh.
• sepia(%): menerapkan nuansa sepia pada latar. 0% membiarkan gambar tidak berubah, 100% sepenuhnya sepia, menciptakan efek foto retro yang hangat.

Privasi Anda adalah prioritas kami. Generator Backdrop Filter memproses semuanya secara lokal di browser Anda menggunakan rendering CSS yang tertanam di mesin browser. Tidak ada data yang dikirim ke server mana pun — kombinasi filter dan konten pratinjau Anda tidak pernah meninggalkan perangkat. Alat ini sepenuhnya gratis tanpa pendaftaran, tanpa batas penggunaan, dan tanpa batasan tersembunyi. Gunakan dengan percaya diri untuk proyek pribadi, situs komersial, atau pekerjaan klien.