CSS Backdrop Filter

Per 1 April 2025, Chrome Platform Status melaporkan lebih dari 25% halaman web yang berhasil dimuat oleh Google Chrome menggunakan backdrop-filter setidaknya sekali. Angka ini naik secara signifikan dari hanya 1,5% pada 2020. Menurut MDN, properti ini pertama kali dirilis di Apple Safari pada 2015.

Menariknya, dari kurang lebih 550 landing page yang berhasil saya observasi dalam studi ini, properti ini hanya ditemukan di kurang dari 1% halaman. Sesuai dengan spesifikasinya, backdrop-filter men­dukung berbagai macam fungsi filter. Namun kami mengamati bahwa blur() merupakan fungsi yang paling umum digunakan. Salah satu kemungkinan alasannya adalah fungsi tersebut lebih cocok dalam penerapan global, sementara fungsi-fungsi lainnya yaitu brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), dan sepia() memerlukan penyesuaian ter­hadap berbagai kondisi yang bisa jadi sangat sulit untuk dikontrol tiap saat.

Pada kesempatan ini, kita akan mengobservasi penggunaan backdrop-filter dalam kasus-kasus nyata, sekaligus mengeksplorasi beragam kemungkinan pemanfaatannya yang jarang ditemui namun boleh jadi cukup berguna dalam konteks yang sedang kita hadapi.

Dalam artikel ini:

• Mengobservasi Dunia
• Melakukan Pertunjukan

Baru pertama kali berkunjung? Baca artikel pertama dalam serial ini: CSS Text Stroke.

Mengobservasi Dunia

Ketika menulis artikel ini, yang paling pertama muncul dalam benak saya adalah situs webnya Apple. Sama sekali tidak mengherankan, mengingat properti backdrop-filter pertama kali dirilis oleh timnya sendiri. Berdasarkan hasil investigasi saya menggunakan Wayback Machine, situs web Apple pertama kali menggunakan properti ini di bagian navigation bar pada 1 Juni 2016, tepat 8 bulan sejak mendapat­kan dukungan resmi di Apple Safari 9.

#ac-globalnav {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

Pada waktu artikel ini ditulis, nilainya—kecuali implementasinya—sama sekali tidak berubah;

@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {
    #globalnav {
        --globalnav-backdrop-filter: saturate(180%) blur(20px);
    }
}

#globalnav {
    -webkit-backdrop-filter: var(--globalnav-backdrop-filter);
    backdrop-filter: var(--globalnav-backdrop-filter);
}

Jika kita mau melangkah ke belakang lebih jauh lagi, kita akan melihat bahwa penggunaan blur effect sebenarnya sudah lebih lama diadopsi oleh Apple khususnya pada Mac OS mereka. Saya kurang yakin kapan tepatnya, yang jelas efek tersebut bisa dilihat pada Launchpad ketika pertama kali diluncurkan untuk Mac OS X Lion pada Oktober 2010. Saya menyangka ada kemungkinan properti backdrop-filter ini sempat masuk ke dalam daftar prioritas tim pengembang Apple Safari.

Sejauh apa kegunaan efek dari properti ini? Mari kita amati dua gambar berikut ini.

Kita mengenal bahwa Apple sangat terobsesi pada setiap detail. Karenanya masalah terkait kontras teks sukar untuk luput dari perhatian tim pengembang webnya. Efek kabur bisa dilihat juga ketika membuka menu pada navigation bar.

.globalnav-curtain {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

Hal ini bertujuan membantu pengguna supaya bisa fokus pada flyout menu yang muncul. Selain itu juga menciptakan ilusi kedalaman. Untuk lebih jelasnya, perhatikan simulasi di bawah ini.

Sekarang saya jadi penasaran mengapa mereka memilih angka tersebut. Mari kita perhatikan hasil dari simulasi menggunakan nilai masing-masing 10px, 20px (default), 30px, dan 100px berikut ini.

Menurut pandangan saya, pengaburan 10px masih sedikit mengganggu fokus. Sementara nilai di atas 20px menghasilkan efek kabur yang terlalu besar sehingga mengurangi estetika.

Selain di situs webnya Apple, kita juga bisa menemukan penggunaan fitur ini di tempat-tempat lain, salah satunya di situs webnya Screen Rant berikut ini.

Bagi saya, penggunaan nilai pengaburan 10px lebih cocok ketimbang nilai 4px yang digunakan pada situs tersebut. Sementara nilai 20px terasa terlalu besar. Kalau ada waktu, cobalah untuk men­simulasi­kannya sendiri :)

Glassmorphism adalah kata kunci yang berguna jika kita ingin mengeksplorasi lebih jauh terkait efek yang diberikan oleh properti ini, terutama dalam domain desain antarmuka yang tampaknya masih cukup mengetren belakangan ini. Pembahasan lebih lengkap bisa ditemukan di dalam sebuah artikel khusus dari Nielsen Norman Group.

Melakukan Pertunjukan

Sekarang tiba giliranmu! Oh ya, jangan ragu untuk menggunakan Chrome DevTools di halaman ini. Kalau ada pertanyaan, tanyakan saja ke +62 821-3000-3006 atau ke alamat surel saya.

.object {
    background: #FFF8;
    border: 2px solid #FFF3;
    backdrop-filter: blur(5px);
}

.object {
    border: 2px solid #FFF;
    backdrop-filter: invert(100%);
}

.object {
    border: 2px solid #FFF;
    backdrop-filter: grayscale(100%);
}

.object {
    border: 2px solid #FFF;
    backdrop-filter: hue-rotate(180deg);
}

.object {
    border: 2px solid #7777;
    backdrop-filter: blur(5px) invert(100%) brightness(25%);
}

Selamat berkarya!