Utiliome

Penjana CSS Glassmorphism

Cipta kesan UI kaca kabur terkini. Pelaras kabur, ketelusan, dan sempadan, kemudian salin CSS ke projek anda. 100% percuma.

Glass Properties

10px
0.20
0.30

Glassmorphism

The trendy frosted glass effect for modern web design.

Drag me around!

Alat Berkaitan

Alat yang mungkin anda perlukan

Penjana Palet Warna

Jana, laras, dan eksport palet warna serta kecerunan cantik untuk proyek UI.

Penjana Kecerunan CSS

Cipta dan sesuaikan kecerunan CSS secara visual dan salin kod serta-merta.

Ekstrak Palet Warna

Muat naik imej untuk mengekstrak palet warnanya serta-merta.

Pengekstrak Warna Dominan

Muat naik imej untuk mengekstrak warna dominannya serta-merta.

Penjana Favicon

Jana favicon standard dan resolusi tinggi untuk projek web anda.

Penjana ICO

Tukar imej kepada format ICO untuk ikon Windows dan favicon.

100% Peribadi • Tanpa Muat Naik Fail ke Pelayan

Mengapa Guna Penjana CSS Glassmorphism Percuma Utiliome?

Dibina khas untuk privasi ketat, pelaksana serta-merta, dan tanpa kerumitan. Tiada langganan atau pendaftaran akaun.

Kotak Pasir Visual

Pelaras kekaburan, kelegapan dan kepekatan warna secara masa nyata di atas latar belakang cerah untuk pratonton segera.

CSS Pelbagai Pemproses

Menjana kod backdrop-filter berawalan webkit secara automatik bagi memastikan keserasian merentasi Safari, Chrome dan Firefox.

Serasi Tailwind

Jana kelas CSS standard atau terjemahkan reka bentuk visual anda secara terus kepada kelas utiliti Tailwind CSS.

Kelewatan Sifar

Pelaksanaan 100% pada bahagian klien bermakna anda boleh menggerakkan peluncur dan melihat kemas kini CSS tanpa lengah.

Utiliome lawan Alternatif Awan Tradisional

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

Cara Menggunakan Penjana CSS Glassmorphism dalam 3 Langkah Mudah

Pemasangan perisian tidak diperlukan. Semuanya berjalan terus dalam penyemak imbas anda.

1

Pelaras Kekaburan (Blur)

Gunakan peluncur kabur untuk menentukan tahap kekaburan latar belakang di belakang kad kaca anda.

2

Selaras Kelegapan & Warna

Ubah saluran alfa warna latar belakang untuk memberikan ton gelap halus atau penampilan kaca kabur putih yang cerah.

3

Salin Kod CSS

Klik butang eksport untuk menyalin kepingan kod CSS yang sedia untuk pengeluaran ke papan keratan anda.

Apakah Trend UI Glassmorphism?

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.

Bagaimanakah Sifat CSS backdrop-filter Berfungsi?

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.

Mencipta Glassmorphism dalam Tailwind CSS

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:

  • Kekaburan: Gunakan backdrop-blur-md atau backdrop-blur-lg untuk mengaburkan latar belakang.
  • Ton Warna: Gunakan bg-white/20 (mod terang) atau bg-slate-900/40 (mod gelap) untuk memberi struktur fizikal kepada kaca.
  • Tepi: Kaca sebenar memantulkan cahaya pada tepinya. Simulasikan ini dengan sempadan 1px menggunakan border border-white/20.

Penjana Utiliome menyediakan suis untuk menghasilkan CSS standard atau rentetan kelas Tailwind yang diformat dengan sempurna.

Menangani Keserasian Pelbagai Pemproses (Isu Safari)

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.

Kebolehcapaian (a11y) dan Kontras Teks Glassmorphism

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.

Menambah Pencahayaan Realistik dengan Bayang-bayang Drop Shadow

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.

Soalan Lazim dan Panduan Teknikal Penjana CSS Glassmorphism

Semua yang anda perlu tahu tentang penggunaan penjana glassmorphism dalam talian percuma dalam talian percuma Utiliome.

Mengapa kesan kaca saya tidak berfungsi pada Safari?

Safari memerlukan awalan '-webkit-backdrop-filter'. Utiliome menjana awalan ini secara automatik dalam eksport CSS bagi memastikan keserasian pelbagai pelayar.

Bolehkah saya menggunakan Glassmorphism dalam Tailwind CSS?

Ya. Penjana Utiliome menyertakan suis untuk menterjemahkan reka bentuk visual anda kepada kelas utiliti Tailwind (cth., backdrop-blur-md bg-white/30).

Adakah backdrop-filter memlahankan prestasi laman web?

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.

Bagaimanakah cara membuat tepi kaca kelihatan realistik?

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.

Adakah penjana CSS ini percuma sepenuhnya?

Ya, 100% percuma tanpa had, tanpa iklan, dan tanpa perlu mendaftar akaun.