Cipta kesan UI kaca beku yang bergaya. Laraskan kekaburan, ketelusan, dan sempadan, kemudian salin CSS terus ke projek anda. 100% percuma. Tiada pendaftaran diperlukan.
Kesan frosted glass terkini untuk reka bentuk web moden.
Dibina khas untuk privasi ketat, pelaksanaan serta-merta, dan tanpa kerumitan. Tiada langganan atau pendaftaran akaun.
Pelaras kekaburan, kelegapan dan kepekatan warna secara masa nyata di atas latar belakang cerah untuk pratonton segera.
Menjana kod backdrop-filter berawalan webkit secara automatik bagi memastikan keserasian merentasi Safari, Chrome dan Firefox.
Jana kelas CSS standard atau terjemahkan reka bentuk visual anda secara terus kepada kelas utiliti Tailwind CSS.
Pelaksanaan 100% pada bahagian klien bermakna anda boleh menggerakkan peluncur dan melihat kemas kini CSS tanpa lengah.
Bandingkan enjin WebAssembly tempatan kami dengan alat awan lama.
| Ciri | Utiliome (Penyemak Imbas Tempatan) | Penukar Awan Lama |
|---|---|---|
| Pratonton Langsung | Kanvas interaktif masa nyata | Penjana kod statik |
| Output Kod | Vanilla CSS & Kelas Utiliti Tailwind | CSS sahaja |
| Keserasian | Tambah -webkit-backdrop-filter automatik | Memerlukan awalan manual |
| Kos | Percuma Selamanya Tanpa Iklan | Dinding berbayar untuk reka letak premium |
Pemasangan perisian tidak diperlukan. Semuanya berjalan terus dalam penyemak imbas anda.
Gunakan peluncur kabur untuk menentukan tahap kekaburan latar belakang di belakang kad kaca anda.
Ubah saluran alfa warna latar belakang untuk memberikan ton gelap halus atau penampilan kaca kabur putih yang cerah.
Klik butang eksport untuk menyalin kepingan kod CSS yang sedia untuk pengeluaran ke papan keratan anda.
Jawapan Pantas: Glassmorphism ialah trend reka bentuk antara muka pengguna moden yang dicirikan oleh latar belakang separa lutsinar dengan kekaburan latar belakang yang kuat, bayang-bayang halus dan sempadan nipis.
Bermula daripada macOS Big Sur, iOS, dan Windows 11 Fluent Design, Glassmorphism telah menjadi piawaian utama bagi aplikasi web moden yang premium.
Falsafah teras bergantung pada "Paksi-Z". Dengan menjadikan lapisan atas separa lutsinar dan mengaburkan lapisan cerah di bawahnya, pereka membangunkan hierarki visual tanpa bayangan tebal. Ini memberi pengguna konteks tentang apa yang berlaku di belakang tetingkap aktif.
Jawapan Pantas: Sifat CSS backdrop-filter mengaplikasikan kesan grafik seperti kekaburan atau perubahan warna pada kawasan di belakang elemen. Berbanding 'filter' biasa, backdrop-filter hanya memberi kesan kepada kawasan yang kelihatan melalui latar lutsinar elemen.
Untuk mencapai kesan Glassmorphism, pembangun bergantung sepenuhnya pada peraturan CSS backdrop-filter. Apabila anda menetapkan warna latar belakang separa lutsinar (cth., background: rgba(255, 255, 255, 0.2);) dan mengaplikasikan backdrop-filter: blur(10px);, enjin pemaparan pelayar akan mengambil piksel di belakang elemen dan mengaburkannya secara matematik.
Kerana ini memerlukan pelayar mengira semula piksel secara berterusan semasa pengguna menatal, ia merupakan sifat dipercepatkan peranti keras. Penjana Utiliome mengira metrik ini secara serta-merta untuk pratonton prestasi masa nyata.
Jawapan Pantas: Tailwind CSS menyediakan utiliti terbina dalam untuk kesan kaca. Anda boleh menggabungkan 'backdrop-blur-md', 'bg-white/30', dan sempadan nipis 'border-white/20' untuk mencipta rupa kaca kabur tanpa menulis CSS tersuai.
Walaupun menulis CSS tersuai bagus untuk pembelajaran, pembangun moden lebih menyukai rangka kerja utiliti seperti Tailwind.
Untuk membina kad kaca dalam Tailwind, anda memerlukan tiga lapisan asas:
backdrop-blur-md atau backdrop-blur-lg untuk mengaburkan latar belakang.bg-white/20 (mod terang) atau bg-slate-900/40 (mod gelap) untuk memberi struktur fizikal kepada kaca.border border-white/20.Penjana Utiliome menyediakan suis untuk menghasilkan CSS standard atau rentetan kelas Tailwind yang diformat dengan sempurna.
Jawapan Pantas: Safari memerlukan awalan '-webkit-' untuk penapis latar belakang. Jika anda tidak memasukkan awalan ini, kesan kaca anda tidak akan berfungsi pada peranti iOS dan macOS.
Kesilapan utama pembangun junior semasa melaksanakan glassmorphism ialah terlupa tentang peranti Apple. Walaupun Chrome dan Firefox menyokong sifat backdrop-filter secara asal, Safari memerlukan awalan penjual.
Jika anda tidak menyertakan -webkit-backdrop-filter: blur(10px);, pengguna Apple hanya akan melihat div lutsinar yang menjadikan teks anda tidak boleh dibaca.
Penjana CSS Utiliome memasukkan awalan WebKit secara automatik ke dalam kod output anda untuk memastikan reka bentuk kelihatan sama di semua sistem pengendalian.
Jawapan Pantas: Glassmorphism kerap menyebabkan kegagalan kebolehcapaian kerana teks di atas latar belakang kabur boleh gagal melepasi nisbah kontras WCAG. Anda mesti memastikan warna teks cukup kontras.
Kritikan paling biasa terhadap Glassmorphism ialah kebolehcapaian yang lemah. Jika imej latar belakang berubah warna di belakang kad kaca anda, teks putih mungkin tiba-tiba tidak kelihatan.
Untuk mengatasinya, anda mesti mengaplikasikan ton latar belakang (kelegapan) yang kuat. Contohnya, jika menggunakan teks putih, pastikan warna latar belakang kaca anda seperti rgba(0, 0, 0, 0.6) untuk mengekalkan nisbah kontras minimum 4.5:1 yang diperlukan.
Jawapan Pantas: Kepingan kaca kabur yang rata tidak kelihatan seperti kaca sebenar. Anda mesti menaikkannya menggunakan bayangan yang halus dan lebar (cth., box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)) untuk memisahkannya dari latar belakang.
Otak manusia memerlukan petunjuk pencahayaan untuk memahami kedalaman. Jika anda sekadar mengaburkan latar belakang, UI akan kelihatan 'rata'.
Untuk menjadikan kaca lebih menyerlah, anda perlu mengangkatnya pada Paksi-Z. Penjana Utiliome membolehkan anda melaras box-shadow yang halus untuk memisahkan kaca daripada latar belakang dengan cantik.
Semua yang anda perlu tahu tentang penggunaan Penjana CSS Glassmorphism dalam talian percuma Utiliome.
Safari memerlukan awalan '-webkit-backdrop-filter'. Utiliome menjana awalan ini secara automatik dalam eksport CSS bagi memastikan keserasian pelbagai pelayar.
Ya. Penjana Utiliome menyertakan suis untuk menterjemahkan reka bentuk visual anda kepada kelas utiliti Tailwind (cth., backdrop-blur-md bg-white/30).
Ya, penggunaan kabur tebal secara berlebihan pada elemen besar boleh menyebabkan sela masa pada peranti mudah alih kerana memaksa GPU mengira semula piksel semasa menatal.
Kaca sebenar memantulkan cahaya pada tepinya. Tambah sempadan 1px dengan kelegapan yang sangat rendah (seperti rgba(255, 255, 255, 0.2)) untuk mensimulasikan pantulan tepi ini.
Ya, 100% percuma tanpa had, tanpa iklan, dan tanpa perlu mendaftar akaun.
Ada permintaan ciri atau jumpa pepijat? Sembang terus dengan kami di Discord.