สี & ดีไซน์

สร้าง CSS Glassmorphism

เอฟเฟกต์กระจกฝ้า backdrop-filter ปรับค่าแล้วเห็นผลทันที พร้อมคัดลอกโค้ดไปใช้ได้เลย

Glassmorphism
เอฟเฟกต์กระจกฝ้าแบบ iOS / macOS

backdrop-filter รองรับบนเบราว์เซอร์สมัยใหม่ทั้งหมด (ต้องใส่ -webkit-backdrop-filter ด้วยสำหรับ Safari) · ใช้กับพื้นหลังที่มีสี/ภาพจึงจะเห็นผล · อ่านง่ายที่สุดเมื่อคุมคอนทราสต์ตัวอักษรให้ผ่าน WCAG

วิธีใช้

  1. ปรับระดับความเบลอของพื้นหลังและความโปร่งใสของกล่อง
  2. ปรับสีขอบและเงาให้เข้ากับดีไซน์
  3. คัดลอกโค้ด CSS ไปใช้ในโปรเจ็กต์

คำถามที่พบบ่อย

ทุกเบราว์เซอร์รองรับ backdrop-filter ไหม?

เบราว์เซอร์ยุคใหม่รองรับหมดแล้ว แต่ควรใส่ค่าพื้นหลังสำรองไว้ด้วย เผื่อเบราว์เซอร์เก่าที่ไม่รองรับจะได้ยังอ่านออก

ทำไมเอฟเฟกต์ไม่ขึ้น?

เพราะต้องมีภาพหรือสีที่หลากหลายอยู่ด้านหลังกล่องถึงจะเห็นความฝ้า ถ้าพื้นหลังเป็นสีเรียบสีเดียวจะแทบไม่เห็นความต่าง

ใช้แล้วเว็บช้าลงไหม?

backdrop-filter กินทรัพยากรการเรนเดอร์พอสมควร ควรใช้เท่าที่จำเป็น และเลี่ยงการใช้กับองค์ประกอบที่เลื่อนตลอดเวลาบนมือถือ

เจอปัญหา? แจ้งเครื่องมือนี้