Penjana CSS Glassmorphism

Alat ini membina kesan kaca kabur (glassmorphism) CSS dengan menggabungkan latar belakang separa lutsinar bersama backdrop-filter: blur() — seret slider di atas pratonton berwarna-warni untuk lihat kad kaca mengaburkan apa sahaja di belakangnya, kemudian salin CSS tersebut. Ia juga mengeluarkan prefix -webkit-backdrop-filter yang diperlukan Safari, kerana backdrop-filter masih memerlukannya di sana.

Apakah alat ini?

Glassmorphism ialah gaya UI di mana sesuatu elemen kelihatan seperti kaca kabur: latar belakang separa lutsinar membenarkan warna di belakangnya terserlah, manakala backdrop-filter: blur() mengaburkan latar belakang itu supaya ia dibaca sebagai kaca dan bukannya panel lutsinar biasa. Sempadan nipis separa lutsinar dan bucu bulat biasanya melengkapkan rupa ini.

Alat ini membolehkan anda membina kesan tersebut secara visual. Pratonton diletakkan di atas latar belakang gradien yang bergerak khusus supaya kekaburan itu dapat dilihat — glassmorphism hanya kelihatan betul di atas sesuatu yang mempunyai warna atau perincian di belakangnya, bukan halaman putih rata. Laraskan kelutan warna latar belakang, kekuatan kekaburan, kelutan sempadan, dan radius bucu, kemudian salin CSS yang dijana.

Sumber: Filter Effects Module Level 1, W3C — mentakrifkan backdrop-filter, sifat yang menjadi asas kesan ini.

Kenapa guna alat ini?

Pratonton langsung di atas latar belakang animasi berwarna-warni, supaya anda benar-benar dapat lihat kesan kaca kabur dan bukan meneka nilai kekaburan atas latar belakang kosong.
Kawalan penuh terhadap kelutan latar belakang, kekuatan kekaburan backdrop, kelutan sempadan dan border-radius dalam satu tempat.
Mengeluarkan backdrop-filter dan prefix -webkit-backdrop-filter secara automatik, supaya anda tidak terlupa sokongan Safari.
Berjalan sepenuhnya dalam pelayar anda — apa yang anda laraskan tidak dimuat naik ke mana-mana.
Percuma, tiada pendaftaran, berfungsi di telefon.

Cara menggunakannya

Pilih warna latar belakang dan laraskan kelutannya — kelutan rendah (10–25%) dibaca sebagai kaca; kelutan tinggi kelihatan lebih seperti panel bertona pejal.
Tingkatkan kekuatan kekaburan untuk mengaburkan apa yang ada di belakang elemen — ini yang sebenarnya mencipta rupa kaca kabur, berbeza daripada ketelusan itu sendiri.
Laraskan kelutan sempadan untuk tambah tepi cahaya yang halus, yang membantu kad kaca dibaca sebagai permukaan tersendiri dan bukannya bercampur dengan latar belakang.
Tetapkan border-radius untuk bucu bulat — kad glassmorphism hampir selalu bulat, jarang bersudut tajam.
Salin CSS yang dijana dan tampal ke dalam stylesheet anda. Ingat elemen itu perlu ada sesuatu yang berwarna atau bertekstur di belakangnya — glassmorphism tidak kelihatan di atas latar belakang warna tunggal yang rata.

Contoh

Input

Latar belakang: putih pada 20% kelutan · Kekaburan: 10px · Kelutan sempadan: 30% · Radius: 16px

Hasil

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 kad kaca kabur klasik yang digunakan pada panel log masuk, bar navigasi dan widget papan pemuka di atas latar belakang berwarna atau bergambar.

Sokongan Safari dan pelayar

backdrop-filter disokong dalam Chrome, Firefox, Edge dan Safari versi terkini, tetapi Safari secara sejarahnya memerlukan prefix -webkit-backdrop-filter bersama sifat tanpa prefix untuk memaparkan kekaburan itu — tanpanya, versi Safari lama secara senyap mengabaikan kekaburan dan hanya memaparkan latar belakang lutsinar rata. Alat ini sentiasa mengeluarkan kedua-dua deklarasi atas sebab itu.

Lihat dokumentasi backdrop-filter MDN untuk butiran keserasian pelayar terkini: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Kenapa glassmorphism perlukan sesuatu di belakangnya

backdrop-filter hanya mengaburkan apa sahaja yang secara visualnya berada di belakang elemen — imej latar belakang, gradien, elemen berwarna lain, atau kandungan yang skrol di bawahnya. Di atas latar belakang putih rata atau warna tunggal, tiada apa untuk dikaburkan, jadi kesannya tidak kelihatan dan elemen itu cuma kelihatan seperti kotak bertona ringan yang bulat. Sentiasa letakkan elemen glassmorphism di atas gradien, gambar, atau latar belakang yang sibuk supaya kesannya dapat dibaca.

Menggabungkan dengan kesan CSS lain

Kad glassmorphism biasanya digabungkan dengan box-shadow halus di bawahnya untuk kedalaman tambahan. Jana CSS kaca kabur di sini, kemudian tambah bayang lembut dengan Box Shadow Generator dan gunakan kedua-dua deklarasi pada elemen yang sama.

→ Penjana CSS Box-Shadow · Penjana CSS Border-Radius

Soalan lazim

Kenapa kesan kaca tidak muncul pada halaman saya?

backdrop-filter mengaburkan apa sahaja yang ada di belakang elemen. Jika elemen anda diletakkan di atas latar belakang putih atau warna pejal rata, tiada apa yang menarik untuk dikaburkan, jadi ia cuma kelihatan seperti kotak bertona pudar. Letakkan ia di atas gradien, gambar, atau latar belakang lain yang berperincian supaya kesan kaca kabur itu dapat dilihat.

Perlukah saya guna prefix -webkit-backdrop-filter?

Ya, jika anda mahu kesan itu dipaparkan dengan konsisten dalam Safari. Alat ini sentiasa mengeluarkan kedua-dua backdrop-filter standard dan versi berprefix -webkit- bersama-sama, kerana Safari secara sejarahnya memerlukan prefix itu untuk memaparkan kekaburan.

Apa beza antara kelutan latar belakang dan kekaburan?

Kelutan latar belakang mengawal berapa banyak warna tona pilihan anda yang terserlah berbanding berapa banyak apa yang di belakang terserlah tanpa perubahan. Kekaburan pula mengawal sejauh mana latar belakang yang kelihatan itu disamar/dilembutkan. Glassmorphism menggunakan kedua-duanya sekali — sedikit ketelusan ditambah sedikit kekaburan — bukan salah satu sahaja.

Bolehkah saya guna backdrop-filter pada mana-mana elemen?

Ya, tetapi ia hanya mempengaruhi apa yang secara visualnya ada di belakang elemen itu dalam rendering halaman, bukan anak elemen itu sendiri. Ia juga mempunyai kos prestasi pada sesetengah peranti apabila digunakan pada banyak elemen atau dianimasikan dengan kerap, jadi paling sesuai digunakan pada beberapa permukaan UI yang menonjol seperti kad, modal atau bar navigasi, bukan berpuluh elemen kecil.

Kenapa sempadan saya nyaris tidak kelihatan?

Sempadan dalam alat ini menggunakan putih separa lutsinar, yang memang direka untuk halus — satu tepi cahaya yang membantu panel kaca dibaca sebagai permukaan tersendiri tanpa kelihatan seperti garis luar tegar yang legap. Naikkan slider kelutan sempadan jika anda mahukan tepi yang lebih jelas kelihatan.