Generator Glassmorphism CSS

Alat ini membuat efek kaca buram (glassmorphism) CSS dengan menggabungkan latar belakang semi-transparan dengan backdrop-filter: blur() — geser slider di atas pratinjau berwarna untuk melihat kartu kaca mengaburkan apa pun di belakangnya, lalu salin CSS-nya. Alat ini juga menghasilkan prefiks -webkit-backdrop-filter yang masih dibutuhkan Safari.

Apa Itu Alat Ini?

Glassmorphism adalah gaya UI di mana sebuah elemen terlihat seperti kaca buram: latar belakang semi-transparan membiarkan warna di belakangnya terlihat, sementara backdrop-filter: blur() mengaburkan latar belakang tersebut sehingga terbaca sebagai kaca, bukan panel transparan biasa. Border tipis semi-transparan dan sudut membulat biasanya melengkapi tampilan ini.

Alat ini memungkinkan Anda membangun efek tersebut secara visual. Pratinjau ditempatkan di atas latar belakang gradien yang bergerak agar blur terlihat jelas — glassmorphism hanya terbaca dengan benar di atas sesuatu yang berwarna atau memiliki detail, bukan halaman putih polos. Sesuaikan opasitas warna latar belakang, kekuatan blur, opasitas border, dan radius sudut, lalu salin CSS yang dihasilkan.

Sumber: Filter Effects Module Level 1, W3C — mendefinisikan backdrop-filter, properti yang menjadi dasar efek ini.

Mengapa Menggunakannya?

Pratinjau langsung di atas latar belakang animasi berwarna, sehingga Anda benar-benar bisa melihat efek kaca buram alih-alih menebak nilai blur pada latar belakang kosong.
Kontrol penuh atas opasitas latar belakang, kekuatan blur latar belakang, opasitas border, dan border-radius dalam satu tempat.
Menghasilkan backdrop-filter dan prefiks -webkit-backdrop-filter secara otomatis, jadi Anda tidak lupa mendukung Safari.
Berjalan sepenuhnya di peramban Anda — tidak ada yang Anda konfigurasi yang diunggah ke mana pun.
Gratis, tanpa pendaftaran, berfungsi di ponsel.

Cara Menggunakan

Pilih warna latar belakang dan sesuaikan opasitasnya — opasitas rendah (10–25%) terbaca sebagai kaca; opasitas tinggi terlihat lebih seperti panel berwarna solid.
Naikkan kekuatan blur untuk mengaburkan apa yang ada di belakang elemen — inilah yang benar-benar menciptakan tampilan kaca buram, berbeda dari transparansi itu sendiri.
Sesuaikan opasitas border untuk menambahkan tepi terang yang halus, yang membantu kartu kaca terbaca sebagai permukaan tersendiri alih-alih menyatu dengan latar belakang.
Atur border-radius untuk sudut membulat — kartu glassmorphism hampir selalu membulat, jarang bersudut tajam.
Salin CSS yang dihasilkan dan tempelkan ke stylesheet Anda. Ingat elemen tersebut membutuhkan sesuatu yang berwarna atau bertekstur di belakangnya — glassmorphism tidak terlihat di atas latar belakang polos satu warna.

Contoh

Input

Latar belakang: putih pada opasitas 20% · Blur: 10px · Opasitas border: 30% · Radius: 16px

Output

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Gaya kartu kaca buram klasik yang digunakan pada panel login, bilah navigasi, dan widget dasbor di atas latar belakang berwarna atau foto.

Dukungan Safari dan peramban

backdrop-filter didukung di Chrome, Firefox, Edge, dan Safari versi terbaru, tetapi Safari secara historis membutuhkan prefiks -webkit-backdrop-filter berdampingan dengan properti tanpa prefiks agar blur dapat dirender — tanpanya, versi Safari lama akan mengabaikan blur secara diam-diam dan hanya menampilkan latar belakang transparan polos. Karena itu, alat ini selalu menghasilkan kedua deklarasi tersebut.

Lihat dokumentasi backdrop-filter di MDN untuk detail kompatibilitas peramban terkini: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Mengapa glassmorphism butuh sesuatu di belakangnya

backdrop-filter hanya mengaburkan apa pun yang secara visual berada di belakang elemen — gambar latar belakang, gradien, elemen berwarna lain, atau konten yang tergulir di bawahnya. Di atas latar belakang putih polos atau satu warna, tidak ada apa pun untuk dikaburkan, sehingga efeknya tidak terlihat dan elemen hanya tampak seperti kotak membulat berwarna samar. Selalu tempatkan elemen glassmorphism di atas gradien, foto, atau latar belakang lain yang ramai agar efeknya terbaca.

Memadukan dengan efek CSS lainnya

Kartu glassmorphism umumnya dipadukan dengan box-shadow halus di bawahnya untuk kedalaman ekstra. Buat CSS kaca buram di sini, lalu tambahkan bayangan lembut dengan Generator Box Shadow dan terapkan kedua deklarasi tersebut pada elemen yang sama.

→ Generator Box Shadow · Generator Border Radius

Pertanyaan yang Sering Diajukan

Mengapa efek kaca tidak muncul di halaman saya?

backdrop-filter mengaburkan apa pun yang berada di belakang elemen. Jika elemen Anda berada di atas latar belakang putih polos atau satu warna, tidak ada sesuatu yang menarik secara visual untuk dikaburkan, sehingga hanya tampak seperti kotak berwarna samar. Tempatkan di atas gradien, gambar, atau latar belakang detail lainnya agar efek kaca buram terlihat.

Apakah saya perlu prefiks -webkit-backdrop-filter?

Ya, jika Anda ingin efeknya tampil dengan andal di Safari. Alat ini selalu menghasilkan backdrop-filter standar bersama dengan versi berprefiks -webkit- secara bersamaan, karena Safari secara historis membutuhkan prefiks tersebut untuk menerapkan blur.

Apa perbedaan antara opasitas latar belakang dan blur?

Opasitas latar belakang mengontrol seberapa banyak warna tint pilihan Anda yang terlihat dibanding seberapa banyak yang ada di belakangnya terlihat tanpa perubahan. Blur mengontrol seberapa banyak latar belakang yang terlihat itu diburamkan/dilembutkan. Glassmorphism menggunakan keduanya bersamaan — sedikit transparansi plus sedikit blur — bukan hanya salah satunya.

Bisakah saya menggunakan backdrop-filter pada elemen apa pun?

Bisa, tetapi hanya memengaruhi apa yang secara visual berada di belakang elemen tersebut dalam rendering halaman, bukan elemen anak dari elemen itu sendiri. Ini juga memiliki biaya performa di beberapa perangkat jika diterapkan pada banyak elemen atau dianimasikan sering, jadi paling baik digunakan untuk sejumlah kecil permukaan UI penting seperti kartu, modal, atau bilah navigasi, bukan puluhan elemen kecil.

Mengapa border saya nyaris tidak terlihat?

Border pada alat ini menggunakan putih semi-transparan, yang memang dimaksudkan halus — tepi terang yang membantu panel kaca terbaca sebagai permukaan tersendiri tanpa terlihat seperti garis luar keras dan buram. Naikkan slider opasitas border jika Anda ingin tepi yang lebih terlihat.