สร้างเอฟเฟกต์ UI กระจกฝ้าสุดเทรนดี้ ปรับความเบลอ ความโปร่งใส และเส้นขอบ จากนั้นคัดลอก CSS ไปยังโปรเจ็กต์ของคุณได้โดยตรง ฟรี 100% ไม่ต้องสมัครสมาชิก
เอฟเฟกต์กระจกฝ้าสุดฮิตสำหรับการออกแบบเว็บสมัยใหม่
ออกแบบมาเพื่อความเป็นส่วนตัวสูงสุด ทำงานได้ทันที ไม่มีสะดุด ไม่ต้องสมัครสมาชิก ไม่ต้องเสียเงิน และไม่ต้องลงทะเบียน
ปรับความเบลอ ความทึบแสง และความอิ่มตัวของสีแบบเรียลไทม์บนพื้นหลังสีสดใสเพื่อดูตัวอย่างเอฟเฟกต์กระจกได้ทันที
สร้างโค้ด backdrop-filter ที่มี webkit-prefix โดยอัตโนมัติ เพื่อให้รองรับ Safari, Chrome และ Firefox
สร้างคลาส CSS มาตรฐาน หรือแปลงดีไซน์ของคุณเป็น Utility Classes สำหรับ Tailwind CSS ได้ทันที
ประมวลผลฝั่งไคลเอ็นต์ 100% ให้คุณลากสไลเดอร์และเห็นการอัปเดต CSS ามหลักคณิตศาสตร์ได้โดยไม่มีอาการหน่วง
เปรียบเทียบขีดความสามารถของเอนจิน WebAssembly ภายในเครื่อง กับเครื่องมือคลาวด์แบบเก่า
| ฟีเจอร์ | Utiliome (ประมวลผลในเบราว์เซอร์) | เครื่องมือแปลงไฟล์บนคลาวด์แบบเดิม |
|---|---|---|
| การดตัวอย่างสด | ผืนผ้าใบโต้ตอบแบบเรียลไทม์ | ตัวสร้างโค้ดแบบคที่ |
| ผลลัพธ์โค้ด | Vanilla CSS & Tailwind Utility Classes | CSS เท่านั้น |
| ความเข้ากันได้ | เพิ่ม -webkit-backdrop-filter อัตโนมัติ | ต้องใส่ prefix เอง |
| ค่าใช้จ่าย | ฟรีตลอดไปและไม่ีโฆษณา | มีเพย์วอลล์สำหรับเลย์เอาต์พรีเมียม |
ไม่ต้องติดตั้งโปรแกรม ทุกอย่างทำงานได้โดยตรงผ่านเว็บเบราว์เซอร์ของคุณ
ใช้สไลเดอร์ปรับความเบลอเพื่อกำหนดระดับความฝ้าขององค์ประกอบพื้นหลังด้านหลังการ์ดกระจกของคุณ
ปรับแต่งค่าอัลฟาของสีพื้นหลังเพื่อเพย่มโทนสีเทาเข้มแบบละมุน หรือลุคกระจกฝ้าสีขาวสว่าง
คลิกปุ่มส่งออกเพื่อคัดลอกโค้ด CSS ที่พร้อมใช้งานไปยังคลิปบอร์ดของคุณโดยตรง
คำตอบโดยย่อ: Glassmorphism คือเทรนด์การออกแบบ UI สมัยใหม่ที่โดดเด่นด้วยพื้นหลังกึ่งโปร่งใสพร้อมการเบลอพื้นหลังอย่างหนัก (กระจกฝ้า) เงาหลายชั้นที่นุ่มนวล แล—ขอบบางๆ สร้างมิติความลึกและการจัดลำดับชั้นในแนวตั้ง
เริ่ม้นอย่างแพร่หลายใน macOS Big Sur, iOS และ Windows 11 Fluent Design โดย Glassmorphism ได้กลายเป็นมาตรฐนหลักสำหรับการพัฒนาเว็บแอปพลิเคชันสมัยใหม่ระดับพรีเมียม
แนวคิดหักพึ่งพา "Z-axis" การทำให้เลเยอร์บนสุดกึ่งโปร่งใสและเบลอเลเยอร์สีสดใส้างใต้ ช่วยให้นักออกแบบสร้างลำดับชั้นทางสายตาได้โดยไม่ต้องพึ่งเงาตกกระทบทึบๆ ทำให้ผู้ใช้เข้าใจบริบทของสิ่งที่เกิดขึ้น "ด้านหลัง" หน้าตางที่กำลังใช้งานอยู่
คำตอบโดยย่อ: คุณสมบัติ backdrop-filter ใน CSS ใช้เอฟเฟกต์กราฟิก เช่น การเบลอหรือารเปลี่ยนสี กับพื้นที่ที่อยู่ด้านหลังองค์ประกอบโดยตรง ต่างจาก 'filter' ั่วไปที่เบลอตัวองค์ประกอบเอง backdrop-filter จะส่งผลเฉพาะสิ่งที่มองเห็นผ่าพื้นหลังโปร่งใสเท่านั้น
การสร้างเอฟเฟกต์ Glassmorphism นักพัฒนาะพึ่งพากฎ backdrop-filter ใน CSS เมื่อคุณกำหนดให้องค์ประกอบมีสีพื้นหลังกึงโปร่งใส (เช่น background: rgba(255, 255, 255, 0.2);) และใช้ backdrop-filter: blur(10px); เอนจินการเรนเดอร์ของเบราว์เซอร์จะดึงพิกเซลที่อยู่ด้านหลัง เบลอมันทางคณิตศสตร์ แล้วระบายลงในองค์ประกอบของคุณ
เนื่องจากเบราว์เซอร์ต้องคำนวณิกเซลใหม่ตลอดเวลาขณะเลื่อนหน้าจอ คุณสมบัตินี้จึงใช้การเร่งความเร็วด้วยฮาร์ดแวร์ ตัวสร้างของ Utiliome จะคำนวณตัวเลขฮาร์ดแวร์เหล่านี้ทันท ให้คุณดูผลกระทบต่อประสิทธิภาพได้แบบเรียลไทม์
คำตอบโดยย่อ: Tailwind CSS มียูทิลิตีสำเร็จรูปสำหรับเอฟเฟต์กระจก คุณสามารถผสมผสาน 'backdrop-blur-md', 'bg-white/30' และขอบบางๆ 'border-white/20' เพื่อสร้งลุคกระจกฝ้าได้ทันทีโดยไม่ต้องเขียน CSS เอง
แม้การเขียน CSS เองจะดีต่อการเรียนรู้ แต่นักพัฒนายุคใหมซะส่วนใหญ่มักชอบใ้เฟรมเวิร์กอย่าง Tailwind
การสร้างการ์ดกระจกใน Tailwind คุณต้องมี 3 เลเยอร์สำคัญ:
backdrop-blur-md หรือ backdrop-blur-lg เพื่อทำพื้นหลังให้ฝ้าbg-white/20 (สำหรับโมดสว่าง) หรือ bg-slate-900/40 (สำหรับโหมดมืด) เพื่อให้กระจกมีมิติทางกายภาborder border-white/20ตัวสร้างของ Utiliome มีสวิตช์สลับเพื่อส่งออกเป็น CSS มาตรฐานหรือสตริงคลาส Tailwind ที่จัดรูปแบบไว้อย่างสมบูรณ์แบบ
คำตอบโดยย่อ: Safari กำหนดให้ใช้ prefix '-webkit-' สำหรับ backdrop filter หากละเว้น prefix นี้ เอฟเฟกต์กระจกจะไม่ทำงานบนอุปกรณ์ iOS และ macOS โดยจะกลายเป็นกล่งโปร่งใสธรรมดา
ข้อผิดพลาดใหญ่ของนักพัฒนามือใหม่เม—่อทำ glassmorphism คือการลืมอุปกรณ์ของ Apple แม้ Chrome และ Firefox จะรองรับคุณสมบัติ backdrop-filter มาตรฐานแล้ว แต่ Safari (โดยเฉพาะ iOS เวอร์ชันเก่า) ยังคงต้องใช้ vendor prefix อย่างเคร่งครัด
หากคุณลืมใส่ -webkit-backdrop-filter: blur(10px); ผู้ใช้ Apple จะเห็นเพียง div โปร่งใสที่ชวนสับสน ทำให้ข้อความอ่านไม่ออกเมื่ออยู่บนพ—้นหลัง
ตัวสร้าง CSS ของ Utiliome จะแทรก WebKit prefix ที่จำเป็นลงในโค้ดให้อ—ตโนมัติ เพื่อให้ดีไซน์ของคุณแสดงผลเหมือนกันในทุกระบบปฏิบัติการหลัก
คำตอบโดยย่อ: Glassmorphism มักนำไปสู่ปัญหาการเข้าถึง เพราะข้อความบนพื้นหลังเบลอและฉูดฉาดอาจไม่ผ่านอัตราส่วนความต่างระดับสีของ WCAG คุณต้องมั่นใจว่าสีข้อความมีความเข้ม (หรือสว่าง) พอเมื่อเทียบกับสีองกระจก
ข้อวิจารณ์ที่พบบ่อยที่สุดของเทรนด์ glassmorphism คือเรืองการเข้าถึงที่ต่ำ หากภาพพื้นหลังที่มีสีสันเปลี่ยนจากสีน้ำเงินเข้มเป็นสีเหลืองสว่างด้านหลังการ์ดกระจก ข้อความสีขาวอาจเลืนหายไปทันที
วิธีแก้ไขคือคุณต้องใช้สีทึบแสงของพื้นหลังทีเข้มพอ ตัวอย่างเช่น หากใช้ข้อความสีขาว ให้ปรับสีพื้นหลังกะจกเป็น rgba(0, 0, 0, 0.6) เพื่อรับประกันว่าไม่ว่าภาพด้านหลังจะเป็นอย่างร ข้อความจะยังรักษาอัตราส่วนความต่างระดับสีขั้นต่ำ 4.5:1 ตามมาตรฐานกฎหมายได้เสมอ
คำตอบโดยย่อ: แผ่นกระจกฝ้าที่วางแบนบนพื้นผิวจะดูไม่เหมือนกระจก คุณต้องยกมันขึ้นโดยใช้เงาตกกระทบที่นุ่มนวลและกว้าง (เช—น box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)) เพื่อแยกมันออกจากเลเยอร์พื้นหลัง
มองของมนุษย์ต้องการสัญญาณแสงเพื่อตีความมิติความลึก หากคุณเพียงแค่เบลอพื้นหลัง UI อาจดู 'แบนราบ'
การทำให้กระจกดูโดดเด่น คุต้องยกระดับมันขึ้นบนแกน Z ตัวสร้างของ Utiliome ช่วยให้คุณปรับแต่ง box-shadow นุ่มนวลได้ การรักษาความทึบของเงาให้ต่ำมาก (ประมาณ 10%) แต่เพ่มรัศมีเบลอให้สูง (32px) จะสร้างเอฟเฟกต์ Ambient Occlusion ที่นุ่มนวลและแยกกรจกออกจากพื้นหลังสีสดใสได้อย่างสวยงาม
รวมทุกสิ่งที่คุณควรรู้เกี่ยวกับการใช้งาน ตัวสร้าง Glassmorphism CSS ออนไลน์ฟรีของ Utiliome
Safari ต้องใช้ prefix '-webkit-backdrop-filter' ซ่ง Utiliome จะสร้าง prefix นี้ให้อัตโนมัติในการส่งออก CSS เพื่อรองรับการทำงานข้ามเบราว์เซอร์
ได้ ตัวสร้างของ Utiliome มีสวิตช์แปลงดีไซน์ของคุณเป็น Utility Classes ของ Tailwind ได้ทันที (เช่น backdrop-blur-md bg-white/30)
ใช่ การใช้การเบลอหนักๆ กับองค์ประกอบขนาดใหญ่เกินไปอาจทำให้เกิดอาการกระตุกบนมือถือสเปกต่ำ เนื่องจาก GPU ต้องคำนวณพิกเซลใหม่ตลอดเวลาขณะเลื่อนหน้าจอ
กระจกจริงจะสะท้อนแสงบริเวณขอบ ให้เพ่มเส้นขอบทึบขนาด 1px ที่มีความทึบแสงต่ำมาก (เช่น rgba(255, 255, 255, 0.2)) เพื่อจำองการสะท้อนของขอบ
ฟรี 100% ไม่มีข้อจำกัด ไม่มีโฆษณา และไม่ต้องลงทะเบียนบัญชีผู้ใช้
มีคำขอฟีเจอร์หรือพบบั๊ก? พูดคุยกับเราได้โดยตรงบน Discord