Pembuat Glassmorphism CSS

Apa itu glassmorphism?

Glassmorphism adalah tren desain antarmuka yang menonjolkan elemen seperti kaca buram yang menampakkan latar belakang melalui efek blur. Menggunakan properti CSS backdrop-filter: blur(), latar belakang semi-transparan, dan border halus untuk tampilan modern dan berlapis. Populer di antarmuka dasbor, kartu, dan modal.

Kompatibilitas browser

backdrop-filter didukung oleh semua browser modern: Chrome, Edge, Safari, dan Firefox 103+. Untuk versi Firefox yang lebih lama, sediakan warna latar belakang solid sebagai fallback.

Cara Kerjanya

1. Pilih warna backdrop. Kaca perlu sesuatu di belakangnya agar terlihat. Pilih latar belakang solid, gradien, atau foto untuk area pratinjau agar Anda dapat menilai bagaimana blur akan terbaca di tata letak nyata Anda.
2. Atur blur dan saturasi. Radius blur menyimulasikan penyebaran cahaya dari kaca buram; saturasi menarik warna dari belakang panel ke depan. Resep gaya Apple klasik adalah sekitar blur(10px) saturate(180%).
3. Sesuaikan warna kaca dan transparansi. Latar belakang elemen itu sendiri harus sebagian transparan, warna buram sepenuhnya menutupi backdrop. Putih atau hitam pada alpha 10-30% adalah titik awal yang umum.
4. Sesuaikan border dan corner radius. Border putih tipis pada alpha rendah meniru sorotan tepi dalam kaca fisik. Border-radius sekitar 12-20px memberikan tampilan soft-card yang digunakan sebagian besar desain glassmorphism.
5. Salin CSS-nya. Tempel blok properti yang dihasilkan ke dalam stylesheet Anda. Tambahkan baris pendamping -webkit-backdrop-filter jika Anda perlu mendukung Safari lama.

Asal-Usul Istilah

Tampilannya lebih tua dari namanya. Apple memperkenalkan backdrop yang diblur secara real-time untuk panel notifikasi dan Control Center dengan iOS 7 pada tahun 2013 dan membawanya ke desktop dengan macOS Yosemite tahun berikutnya, tim WebKit merilis properti CSS backdrop-filter pada Agustus 2015 khususnya karena, seperti yang dinyatakan posting peluncurannya, «bahasa desain Antarmuka Pengguna untuk iOS 7 dan OS X Yosemite berubah untuk menggabungkan efek backdrop blur yang indah.» Windows Vista «Aero Glass» milik Microsoft (2007) adalah ide yang sama, dan Microsoft mendokumentasikan dua material terkait dalam sistem Fluent modern: Acrylic (transparan, diblur, dengan hamparan noise) dan Mica (varian bernuansa desktop buram yang diperkenalkan dengan Windows 11). Nama tunggal «glassmorphism» diciptakan oleh desainer Polandia Michał Malewicz dari Hype4 Academy pada November 2020, seiring peluncuran macOS Big Sur, konsistensi penamaan, dalam keluarga yang sama dengan «neumorphism» yang lebih awal, memberi desainer kosakata bersama untuk mendiskusikan teknik ini.

Resep CSS

.glass-card {
  /* 1. Element background: must be partially transparent */
  background: rgba(255, 255, 255, 0.18);

  /* 2. The frosted-glass effect */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari 9-16 */

  /* 3. The inner-edge highlight */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 4. Soft corners */
  border-radius: 16px;
}

Tiga hal yang perlu dipahami tentang resep ini. Pertama, latar belakang elemen itu sendiri harus transparan atau sebagian transparan, MDN menyatakannya dengan jelas: «Elemen atau latar belakangnya harus transparan atau sebagian transparan agar efeknya terlihat.» background-color buram sepenuhnya menutupi sampel yang diblur dan pengguna melihat panel datar. Kedua, efek ini membutuhkan sesuatu di belakangnya untuk diblur, glassmorphism tidak berfungsi di atas halaman putih seragam. Ketiga, Safari modern menerima properti tanpa awalan, tetapi apa pun yang lebih lama dari Safari 17 memerlukan keduanya: backdrop-filter dan kembarannya -webkit-backdrop-filter.

Sepuluh Fungsi Filter

backdrop-filter didefinisikan dalam W3C Filter Effects Module Level 2 dan menerima sepuluh fungsi filter yang sama seperti properti filter biasa: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), dan sepia(). Bisa digabungkan, dan urutannya penting, diterapkan dari kiri ke kanan terhadap sampel backdrop. Untuk glassmorphism, blur() ditambah saturate() mencakup tampilan kanonik; sisanya adalah pengaturan kreatif (mis. brightness(105%) pada backdrop gelap untuk mengangkat sampel yang diblur, atau contrast(120%) untuk menjaga hubungan warna tetap tajam).

Dukungan Browser dan Awalan -webkit-

Per 2026 properti ini didukung di setiap browser evergreen. WebKit pertama kali merilis pada 10 Agustus 2015 dengan Safari 9 / iOS 9, di belakang awalan -webkit-backdrop-filter. Chrome menambahkan dukungan tanpa awalan di versi 76 (Juli 2019), Edge mengikuti dengan perpindahan Chromium di versi 79, dan Firefox 103 mengaktifkannya tanpa flag pada 26 Juli 2022. MDN menandai properti ini sebagai Baseline 2024 (Baru tersedia sejak September 2024) artinya keempat mesin utama kini berinteroperasi. Dukungan di dunia nyata sekitar 95% global. Untuk mencakup build Safari lama (dan pengguna PostCSS), sertakan deklarasi berawalan dan tanpa awalan secara berdampingan atau biarkan autoprefixer menambahkan awalan dari konfigurasi Browserslist Anda.

Fallback untuk Browser yang Tidak Mendukungnya

Gunakan query @supports agar browser yang tidak mendukung mendapatkan fallback solid alih-alih panel transparan yang tidak terbaca:

.glass-card {
  background: rgba(30, 41, 59, 0.92); /* opaque fallback */
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
  }
}

Performa: Kapan Menggunakannya (dan Kapan Tidak)

backdrop-filter diakselerasi GPU, tetapi tidak gratis. Setiap permukaan yang difilter memaksa browser untuk mempertahankan layer compositing terpisah dan mengambil ulang sampel area di belakang elemen. Draf editor W3C mengakui hal ini secara langsung, menyebutkan bahwa backdrop filter yang bersarang atau bertumpuk dapat menyebabkan «rendering pass eksponensial», dan posting peluncuran WebKit memperingatkan properti tersebut «memaksa mesin untuk melakukan lebih banyak rendering pass, yang akan berdampak pada performa.» Ringkasan singkat Web.dev berlaku: «backdrop-filter mungkin merugikan performa. Uji sebelum men-deploy.»

Aturan praktis: jaga radius blur di bawah ~20px pada kode produksi, hindari permukaan kaca full-viewport (nav bar kaca yang menggambar ulang setiap scroll adalah pelanggar klasik), jangan menumpuk banyak permukaan yang difilter di atas satu sama lain, dan hindari backdrop-filter di atas elemen <video> di mana blur harus dihitung ulang setiap frame. Microsoft memberi tahu pengguna Acrylic hal yang sama dalam dokumen Fluent: «Efek Acrylic dinonaktifkan secara otomatis ketika perangkat masuk mode Hemat Baterai.»

Aksesibilitas: Jebakan Kontras

Glassmorphism secara definisi menurunkan kontras antara teks dan latar belakangnya, karena «latar belakang» di bawah panel sekarang adalah apa pun yang kebetulan ada di belakangnya, dan itu berubah seiring pengguna menggulir atau mengganti wallpaper. Minimum WCAG 2.1 yang relevan (4,5:1 untuk teks isi normal, 3:1 untuk teks besar atau tebal) harus dipenuhi terhadap backdrop kasus terburuk, bukan rata-rata. Panduan praktis: jaga teks isi keluar dari panel kaca dan gunakan terutama untuk chrome (kartu, header, modal) di mana pembacaan sesungguhnya terjadi di atas permukaan dalam yang lebih buram. Selalu sediakan varian fallback buram untuk pengguna yang telah menonaktifkan transparansi di level OS, baik macOS (Pengaturan Sistem → Aksesibilitas → Tampilan → Kurangi Transparansi) maupun Windows (Pengaturan → Personalisasi → Warna → Efek Transparansi) mengekspos tombol tersebut, dan CSS dapat mendeteksinya:

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

Di Mana Glassmorphism Bekerja Baik, dan Di Mana Tidak

• Cocok: navigation bar mengambang di atas gambar hero, kartu dashboard di atas backdrop gradien berwarna, dialog modal yang melapisi konten kaya, widget gaya layar kunci, overlay video di mana chrome pemutar mendapat manfaat dari pelunakan gambar di belakangnya.
• Berisiko: kontainer teks isi (kontras berubah seiring pengguna menggulir), tabel data (noise visual mengganggu pemindaian baris), permukaan full-viewport (dampak performa), antarmuka yang ditujukan untuk pengguna dengan penglihatan rendah kecuali dipasangkan dengan fallback reduced-transparency.
• Hindari: tombol call-to-action utama (kehilangan kontras merugikan konversi), panel error atau peringatan (memerlukan keterbacaan maksimum), formulir yang banyak teksnya.

Kesalahan Umum

1. Melupakan latar belakang transparan. Mengatur backdrop-filter pada elemen dengan background-color buram tidak menghasilkan efek yang terlihat, warna buram menutupi sampel yang diblur. Selalu pasangkan dengan latar belakang rgba()/hsla().
2. Kaca di atas warna datar. Jika tidak ada sesuatu yang menarik di belakang panel, memburnya tidak menghasilkan «kaca», hanya persegi panjang sedikit berwarna. Efek ini membutuhkan foto, gradien, atau backdrop yang ramai agar terbaca.
3. Melewati awalan -webkit-. Build Safari lama memerlukannya. Kirimkan kedua baris atau andalkan autoprefixer.
4. Menumpuk terlalu banyak panel. Setiap permukaan yang difilter adalah layer GPU tersendiri. Tiga atau empat biasanya batas praktis sebelum frame-rate turun di perangkat mobile.
5. Gagal pengecekan kontras kasus terburuk. Uji panel terhadap bagian paling terang dan paling gelap dari setiap backdrop yang akan dilaluinya, bukan hanya satu screenshot demo.
6. Menganimasikan radius blur. Transisi backdrop-filter: blur(0) → blur(20px) saat hover secara teknis diizinkan tetapi menghitung ulang blur setiap frame dan merupakan cara termudah untuk menghancurkan performa scroll. Animasikan opacity atau transform sebagai gantinya dan biarkan blur tetap statis.

Pertanyaan yang Sering Diajukan

Mengapa kartu kaca saya terlihat seperti panel datar?

background-color elemen bersifat buram sepenuhnya. backdrop-filter memblur apa pun yang ada di belakang elemen, tetapi elemen menggambar di atasnya. Dengan latar belakang buram, cat tersebut menutupi sampel yang diblur. Beralih ke rgba() atau hsla() pada alpha 10-30%, titik manis untuk sebagian besar desain glassmorphism.

Apakah ini akan bekerja di Safari?

Ya, Safari adalah browser pertama yang merilis properti ini, pada Agustus 2015. Versi Safari lama memerlukan awalan -webkit-backdrop-filter; Safari modern menerima form tanpa awalan. Menyertakan keduanya membuat CSS yang sama bekerja di setiap build Safari yang masih aktif digunakan.

Apakah glassmorphism dapat diakses?

Hanya jika Anda mendesain untuk backdrop kasus terburuk. WCAG 2.1 memerlukan rasio kontras 4,5:1 untuk teks normal dan 3:1 untuk komponen UI besar atau tebal, diukur terhadap warna apa pun yang berada di bawah panel. Sediakan fallback buram di bawah query media prefers-reduced-transparency agar pengguna yang telah menonaktifkan transparansi di level OS mendapatkan permukaan yang dapat dibaca.

Apakah ini merugikan performa?

Bisa. Setiap permukaan yang difilter memaksa browser untuk menjaga layer compositing terpisah dan mengambil ulang sampel area di belakangnya, dan radius blur besar atau panel yang bertumpuk memperparah biayanya. Jaga radius di bawah sekitar 20px, hindari panel full-viewport, dan jangan letakkan di atas <video>. Panduan resmi Web.dev adalah menguji pada perangkat low-end yang representatif sebelum dirilis.

Apa perbedaan antara glassmorphism dan neumorphism?

Neumorphism (diciptakan beberapa bulan sebelumnya) menciptakan ilusi bentuk plastik lembut yang timbul dengan menggabungkan bayangan dalam dan luar pada warna datar yang sama dengan latar belakang halaman, tanpa transparansi, tanpa blur. Glassmorphism membuat latar belakang halaman terlihat melalui panel transparan yang diblur. Keduanya saling melengkapi daripada bersaing, dan beberapa desain menggunakan keduanya: tombol neumorphic di atas kartu kaca, misalnya.

Bolehkah saya menyalin CSS untuk penggunaan produksi?

Ya. Outputnya adalah CSS biasa menggunakan properti standar, tanpa ekstensi proprietary, tanpa JavaScript. Masukkan aturan ke dalam stylesheet Anda dan terapkan kelas ke elemen mana pun yang ingin terlihat seperti kaca.

Alat terkait