Penjana Glassmorphism
Cipta kad UI kaca beku dengan kabur latar, ketelusan dan sempadan, kemudian salin CSS.
Kad Kaca
Kaca beku terapung di atas latar belakang yang terang.
—
Menghasilkan kedua-dua backdrop-filter dan -webkit-backdrop-filter. Nota: backdrop-filter tidak disokong dalam pelayar lama (cth. Firefox di bawah 103); tambah latar belakang sandaran pepejal untuknya.
Mengenai Penjana Glassmorphism
Glassmorphism Generator membina kesan kad kaca kabur: panel lut sinar yang mengaburkan apa sahaja di belakangnya. Peluncur mengawal kekaburan dan ketepuan backdrop-filter, warna dan kelutsinaran tona kaca, warna dan kelegapan sempadan, jejari sudut dan bayang luar — setiap perubahan dipaparkan secara langsung di atas latar belakang yang jelas supaya anda boleh menilai kesan itu secara realistik.
Empat pratetap kualiti — subtle, frosted, vivid dan dark glass — memberi anda kombinasi terbukti untuk bermula. Pratetap dark menunjukkan bagaimana resipi sama disesuaikan untuk antara muka gelap, di mana sempadan cahaya samar melakukan sebahagian besar kerja memisahkan kaca daripada latar belakang.
CSS yang dijana merangkumi kedua-dua backdrop-filter dan awalan -webkit-backdrop-filter yang diperlukan oleh Safari. Perhatikan peringatan keserasian: pelayar lama (contohnya Firefox sebelum versi 103) tidak menyokong backdrop-filter, jadi sediakan latar belakang kukuh sebagai fallback untuknya.
Cara menggunakan Penjana Glassmorphism
- Mula daripada pratetap — subtle, frosted, vivid atau dark glass — atau daripada tetapan lalai.
- Laraskan kekaburan dan ketepuan penapis latar belakang.
- Tetapkan warna dan kelutsinaran tona kaca.
- Laraskan warna sempadan, kelegapan sempadan, jejari sudut dan bayang garis luar.
- Salin CSS — ia sudah termasuk sifat berawalan -webkit- untuk Safari.