ตัวสร้าง Glassmorphism

เกี่ยวกับเครื่องมือนี้

Glassmorphism Generator สร้างเอฟเฟกต์กระจกฝ้าด้วย CSS backdrop-filter ให้คุณปรับ blur ความโปร่งของพื้นหลัง saturation ความโปร่งของขอบ รัศมีมุม และสีโทนกระจก พร้อมพรีวิวแบบเรียลไทม์

วิธีใช้

1. เลือกสีโทนของกระจก
2. ปรับ blur, opacity และ saturation
3. ตั้งค่าความโปร่งของขอบและ border radius
4. คลิก Copy CSS

ข้อควรรู้

• เอฟเฟกต์นี้ใช้ backdrop-filter: blur() saturate() ซึ่งเบลอทุกอย่างที่อยู่ด้านหลัง element
• ต้องใช้พื้นหลังกึ่งโปร่งใส (rgba) ไม่เช่นนั้นจะมองไม่เห็นเอฟเฟกต์เบลอ
• CSS ที่สร้างขึ้นมี prefix -webkit-backdrop-filter สำหรับ Safari ด้วย
• เอฟเฟกต์กระจกจะดูดีที่สุดบนพื้นหลังที่มีสีสันหรือรูปภาพ ถ้าเป็นสีพื้นเรียบจะมองไม่เห็นการเบลอ
• ควรตรวจคอนทราสต์ของข้อความเสมอ เพราะแผงโปร่งแสงอาจมีคอนทราสต์ต่ำกว่าเกณฑ์ WCAG เมื่ออยู่บนพื้นหลังที่ซับซ้อน

ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ

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