ตัวสร้างกลาสมอร์ฟิซึม

เกี่ยวกับ ตัวสร้างกลาสมอร์ฟิซึม

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

พรีเซ็ตคุณภาพสี่แบบ — subtle, frosted, vivid และ dark glass — มอบชุดค่าผสมที่พิสูจน์แล้วให้เริ่มต้น พรีเซ็ต dark แสดงให้เห็นว่าสูตรเดียวกันปรับใช้กับ UI แบบมืดได้อย่างไร ซึ่งขอบสว่างจาง ๆ ทำหน้าที่หลักในการแยกกระจกออกจากพื้นหลัง

CSS ที่สร้างขึ้นรวมทั้ง backdrop-filter และพรีฟิกซ์ -webkit-backdrop-filter ที่ Safari ต้องการ ข้อควรระวังด้านความเข้ากันได้: เบราว์เซอร์รุ่นเก่า (เช่น Firefox ก่อนเวอร์ชัน 103) ไม่รองรับ backdrop-filter จึงควรมี fallback พื้นหลังทึบให้ด้วย

วิธีใช้ ตัวสร้างกลาสมอร์ฟิซึม

1. เริ่มจากพรีเซ็ต — subtle, frosted, vivid หรือ dark glass — หรือใช้ค่าเริ่มต้น
2. ปรับความเบลอและความอิ่มตัวของ backdrop filter
3. ตั้งค่าสีและความโปร่งใสของกระจก
4. ปรับสีขอบ ความทึบของขอบ รัศมีมุม และเงาขอบ
5. คัดลอก CSS — ซึ่งมีคุณสมบัติพรีฟิกซ์ -webkit- สำหรับ Safari รวมอยู่แล้ว

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