Glassmorphism คือ​อะไร กระจก​ฝ้า​บน​เว็บ​ที่​บาง​เครื่อง​ยัง​ไม่​เบลอ

เจ้าของ​เว็บ​ที่​อยาก​ได้​แผง​เมนู​แบบ​กระจก​ฝ้า มัก​อนุมัติ​จาก​ภาพ​นิ่ง​ใน​ไฟล์​ออกแบบ โดย​ยัง​ไม่รู้​ว่า​บน​หน้า​เว็บ​จริง​เอฟเฟกต์​นี้​ทำงาน​อีก​แบบ บท​นี้​อธิบาย Glassmorphism จาก​มุม​ที่​ต้อง​รู้​ก่อน​สั่ง​งาน คือ​เบราว์เซอร์​ทำ​อะไร​กับ​พื้น​หลัง และ​เครื่อง​ไหน​ยัง​ไม่​รองรับ แหล่ง​หลัก​คือ​ข้อ​กำหนด Filter Effects Module Level 2 ฉบับ Editor's Draft ลง​วัน​ที่ 23 มกราคม 2026 ซึ่ง​มี Dean Jackson จาก Apple และ Chris Harrelson จาก Google เป็น​บรรณาธิการ ร่วม​กับข้อมูล​ความ​เข้า​กัน​ได้​ของ​เบราว์เซอร์ ที่ MDN เปิด​เป็น​ข้อมูล​สาธารณะ

แผง​เมนู​ที่​มอง​ทะลุ​ไป​เห็น​ภาพ​สินค้า​จาง ๆ ด้าน​หลัง การ์ด​ราคา​ที่​ลอย​อยู่​บน​ภาพ​บรรยากาศ​ร้าน หรือ​กล่อง​ข้อความ​บน​วิดีโอ​พื้น​หลัง เป็น​รูป​แบบ​ที่​นัก​ออกแบบ​เรียก​ว่า Glassmorphism หรือ​กระจก​ฝ้า บน​ภาพ​นิ่ง​และ​ใน​ไฟล์​วิดีโอ เอฟเฟกต์​นี้​ถูก​สร้าง​เสร็จ​ตั้งแต่​ใน​โปรแกรม​ออกแบบ แต่​บน​หน้า​เว็บ เบราว์เซอร์​ของ​ผู้​ชม​แต่ละ​คน​ต้อง​สร้าง​เอฟเฟกต์​เอง​ทุก​ครั้ง​ที่​เปิด​หน้า

Glassmorphism คือ​สไตล์​ที่​ใช้​แผง​โปร่งแสง​วาง​ซ้อน​บน​ภาพ​หรือ​พื้น​สี​ด้าน​หลัง แล้ว​ทำให้​ส่วน​ที่​อยู่​หลัง​แผง​เบลอ ผู้​ชม​จึง​ยัง​รู้​ว่า​ข้าง​หลัง​มี​อะไร แต่​ตัว​หนังสือ​บน​แผง​ไม่​ตี​กับ​ราย​ละเอียด​ของ​ภาพ แผง​แบบ​นี้​มัก​มี​ขอบ​บาง ๆ สี​อ่อน มุม​โค้ง และ​สี​พื้น​ของ​แผง​ที่​โปร่งแสง​บาง​ส่วน

ความ​ต่าง​จากNeumorphism อยู่​ที่​วัสดุ Neumorphism ทำ​ชิ้น​ส่วน​เป็น​วัสดุ​เดียว​กับ​พื้น​แล้ว​ใช้​เงา​ทำให้​นูน ส่วน Glassmorphism ทำ​ชิ้น​ส่วน​เป็น​แผ่น​ใส​ที่​ลอย​อยู่​เหนือ​พื้น แล้ว​ให้​สิ่ง​ที่​อยู่​ข้าง​หลัง​เป็น​ตัว​สร้าง​สีสัน​ของ​แผง

Glassmorphism เกี่ยว​กับ​คำ​สั่ง backdrop-filter อย่างไร

backdrop-filter คือ​คำ​สั่ง CSS ที่​ทำให้​กระจก​ฝ้า​บน​หน้า​เว็บ​เกิด​ขึ้น​ได้ คำ​สั่ง​นี้​ใส่​ฟิล​เตอร์​ให้ "สิ่ง​ที่​อยู่​ข้าง​หลัง" ชิ้น​ส่วน​นั้น ส่วน​คำ​สั่ง filter ที่​ชื่อ​คล้าย​กัน​ใส่​ฟิล​เตอร์​ให้​ตัว​ชิ้น​ส่วน​เอง ข้อ​กำหนด​ระบุ​ค่าที่​ใส่​ได้​คือ none หรือ​รา​ยการฟิล​เตอร์ เช่น blur() ถ้า​ค่า​เป็น none จะ​ไม่​มี​เอฟเฟกต์ ถ้า​ใส่​หลาย​ฟิล​เตอร์ เบราว์เซอร์​ใช้​ตาม​ลำดับ​ที่​เขียน และ​ค่า​ตั้ง​ต้น​ของ​คำ​สั่ง​นี้​คือ none เสมอ

เบราว์เซอร์​คัด​ลอก​ภาพ​ของ​สิ่ง​ที่​อยู่​ข้าง​หลัง​แผง​มา​ไว้​ใน​ที่พัก ใส่​ฟิล​เตอร์ ตัด​ให้​พอดี​กับ​กรอบ​ของ​แผง แล้ว​วาด​แผง​ทับ​ลง​ไป ข้อ​กำหนด​เขียน​ขั้น​ตอน​ไว้​ใน​หัวข้อ Filtering and Clipping สำหรับ​ชิ้น​ส่วน​ที่​ตั้ง backdrop-filter ไว้ ดังนี้

1. คัด​ลอก​ภาพ Backdrop Root Image ลง​ที่พัก​ชั่วคราว เช่น ภาพ​แร​ส​เตอร์
2. ใส่​ฟิล​เตอร์​ทั้งหมด​ที่​ตั้ง​ไว้​กับ​ภาพ​ใน​ที่พัก​นั้น
3. ถ้า​แผง​ถูก​หมุน​หรือ​ย่อ​ขยาย ให้​กลับ​ค่า​การ​หมุน​หรือ​ย่อ​ขยาย​นั้น​กับ​ภาพ​ใน​ที่พัก
4. ตัด​ภาพ​ตาม​กรอบ​ของ​แผง รวม​มุม​โค้ง​ถ้า​มี
5. วาด​ตัว​แผง​ทั้งหมด ทั้ง​พื้น ขอบ และ​สิ่ง​ที่​อยู่​ใน​แผง ลง​บน​ภาพ​ใน​ที่พัก
6. ถ้า​แผง​มี​การ​หมุน เอฟเฟกต์ หรือ​การ​ตัด​ขอบ ให้​ใส่​กับ​ภาพ​ใน​ที่พัก​ด้วย
7. วาง​ภาพ​ใน​ที่พัก​ลง​บน​หน้า​เว็บ

ข้อ​กำหนด​เขียน​เพิ่ม​ว่า​ฟิล​เตอร์​ต้อง​คำนวณ​ใน​ปริภูมิ​สี sRGB และ​ถ้า​ใช้ blur() ขอบ​ของ​ภาพ​ที่​เบลอ​จะ​ถูก​เติม​แบบ​สะท้อน​กลับ (edgeMode="mirror") ขอบ​แผง​จึง​ไม่มี​แถบ​มืด​จาก​การ​เบลอ​เกิน​กรอบ

ทำไม​แผง​กระจก​ที่​ทึบ​เกิน​ไป​จึง​มอง​ไม่​เห็น​การ​เบลอ

เพราะ​ภาพ​ที่​เบลอ​แล้ว​ถูก​วาด​ทับ​ด้วย​พื้น​ของ​แผง​เอง​ใน​ขั้น​ตอน​ที่ 5 ข้อ​กำหนด​มี​หมายเหตุ​ว่า​เอฟเฟกต์​ของ backdrop-filter จะ​มอง​ไม่​เห็น ถ้า​แผง​ไม่มี​ส่วน​ใด​โปร่งแสง​เลย และ​ค่า​ความ​ทึบ​ที่​ตั้ง​ให้​แผง​จะ​มี​ผล​กับ​ภาพ​ที่​เบลอ​ด้วย ถ้า​อยาก​ให้​เห็น​พื้น​หลัง​ที่​เบลอ​เต็ม​ที่ ข้อ​กำหนด​แนะนำ​ให้​ตั้ง​สี​พื้น​แผง​เป็น​โปร่งใส ใน​ทาง​ปฏิบัติ นัก​ออกแบบ​มัก​ใช้​สี​พื้น​ขาว​หรือ​ดำ​ที่​โปร่งแสง​บาง​ส่วน เพื่อ​ให้​ได้​ทั้ง​การ​เบลอ​และ​พื้นที่​รอง​ตัว​หนังสือ

Backdrop Root คือ​ชิ้น​ส่วน​บรรพบุรุษ​ที่​ใกล้​ที่สุด​ซึ่ง​เบราว์เซอร์​ใช้​เป็น​จุด​เริ่ม​ของ​ภาพ​ที่​จะ​เบลอ ทุก​อย่าง​ที่​วาด​ระหว่าง​ชิ้น​นั้น​กับ​แผง​กระจก​จะ​ถูก​นำ​มา​เบลอ ส่วน​สิ่ง​ที่​อยู่​เหนือ Backdrop Root ขึ้น​ไป​จะ​ไม่​ถูก​นำ​มา​เบลอ ข้อ​กำหนด​ระบุ​ว่า​ชิ้น​ส่วน​แบบ​ต่อ​ไป​นี้​สร้าง Backdrop Root

ผล​ที่​เจอ​บ่อย​คือ​แผง​กระจก​ที่​อยู่​ใน​กล่อง​ซึ่ง​กำลัง​จาง​เข้า​มา จะ​เบลอ​ได้​แค่​สิ่ง​ที่​อยู่​ใน​กล่อง​นั้น ไม่​เห็น​ภาพ​พื้น​หลัง​ของ​หน้า ข้อ​กำหนด​ตั้งใจ​ไม่​ให้ z-index การ​ตรึง​ตำแหน่ง และ​การ​หมุน​สร้าง Backdrop Root เพื่อ​ให้​กล่อง​ที่​มี​แอนิเมชัน​ยัง​เบลอ​พื้น​หลัง​ด้าน​นอก​ได้

ข้อ​กำหนด backdrop-filter เสร็จ​สมบูรณ์​แล้ว​หรือ​ยัง

ยัง​ไม่​เสร็จ หัวข้อ​สถานะ​ของ​เอกสาร​เขียน​ว่า Level 2 เขียน​เป็น "ส่วน​ต่าง" จาก Level 1 ร่าง​ขึ้น​เพื่อ​การ​อภิปราย และ​ยัง​ไม่มี​ฉันทา​มติ​ของ​คณะ​ทำงาน หัวข้อ Backdrop Root เขียน​ย้ำ​ว่า​ยัง​ไม่มี​ฉันทา​มติ​โดย​เฉพาะ​เรื่อง​นิยาม​ของ Backdrop Root และ​ชี้​ไป​ยัง​การ​อภิปราย​ใน​ประเด็น​ที่ 53 แปล​ว่า​ราย​ละเอียด​ว่า "เบลอ​อะไร​บ้าง" ยัง​อาจ​เปลี่ยน​ได้ แม้​เบราว์เซอร์​หลัก​จะ​รองรับ​คำ​สั่ง​นี้​แล้ว​ก็ตาม

เบราว์เซอร์​หลัก​รองรับ backdrop-filter ครบ​แล้ว​ใน​รุ่น​ปัจจุบัน แต่​รุ่น​ที่​เริ่ม​รองรับ​ห่าง​กัน​หลาย​ปี ข้อมูล​ความ​เข้า​กัน​ได้​ของ MDN ระบุ​รุ่น​แรก​ที่​รองรับ และ​ไฟล์​ข้อมูล​เบราว์เซอร์​ชุด​เดียวกัน​ระบุ​วัน​ออก​ของ​แต่ละ​รุ่น ตาราง​นี้​ตรวจ​เมื่อ 27 กันยายน 2569

ทำไม​โค้ด​กระจก​ฝ้า​บาง​ชุด​ต้อง​เขียน​สอง​บรรทัด

เพราะ Safari และ Safari บน iOS ก่อน​รุ่น 18 อ่าน​เฉพาะ​ชื่อ​คำ​สั่ง​แบบ​มี​คำนำ​หน้า -webkit-backdrop-filter ข้อมูล​ของ MDN ระบุ​ว่า Safari เริ่ม​รองรับ​แบบ​ไม่มี​คำนำ​หน้า​ใน​รุ่น 18 ซึ่ง​ออก​พร้อม​กัน​ทั้ง​บน Mac และ iPhone เครื่อง iPhone ที่​ยัง​ไม่​อัปเดต​ระบบ​จึง​ต้อง​ใช้​ชื่อ​แบบ​เดิม โค้ด​ที่​เขียน​เฉพาะ​ชื่อ​มาตรฐาน​จะ​ไม่​เบลอ​บน​เครื่อง​กลุ่ม​นั้น นัก​พัฒนา​จึง​มัก​เขียน​ทั้ง​สอง​ชื่อ​คู่​กัน​ด้วย​ค่า​เดียวกัน

แผน​สำรอง​ที่​ดี​คือ​ทำให้​แผง​ยัง​อ่าน​ได้​แม้​ไม่มี​การ​เบลอ​เลย เครื่อง​ที่​ไม่​รองรับ​จะ​ข้าม​คำ​สั่ง backdrop-filter ไป ผล​คือ​แผง​กลาย​เป็น​สี​พื้น​โปร่งแสง​วาง​บน​ภาพ​ที่​คม​ชัด ถ้า​สี​พื้น​ของ​แผง​บาง​เกิน​ไป ตัว​หนังสือ​จะ​วาง​ทับ​ราย​ละเอียด​ของ​ภาพ​จน​อ่าน​ยาก ปัญหา​นี้​เกิด​กับ​เครื่อง​ที่​ไม่​เบลอ​เท่านั้น ทีม​ที่​ทดสอบ​บน​เครื่อง​รุ่น​ใหม่​เครื่อง​เดียว​จึง​อาจ​ไม่​เห็น

1. ตั้ง​สี​พื้น​ของ​แผง​ให้​ทึบ​พอ​อ่าน​ได้​เมื่อ​ไม่​เบลอ แล้ว​ค่อย​ลด​ความ​ทึบ​เฉพาะ​ใน​เครื่อง​ที่​รองรับ
2. ใช้​กฎ @supports ของ CSS ตรวจ​ว่า​เบราว์เซอร์​รองรับ backdrop-filter หรือ​ไม่ ก่อน​เปลี่ยน​สี​พื้น​เป็น​แบบ​โปร่ง​กว่า
3. เขียน​ชื่อ​คำ​สั่ง​ทั้ง​แบบ​มี​และ​ไม่มี​คำนำ​หน้า -webkit- สำหรับ Safari รุ่น​เก่า
4. ไม่​วาง​ปุ่ม​สำคัญ​บน​แผง​กระจก​ที่​อยู่​เหนือ​วิดีโอ​หรือ​ภาพ​ที่​เปลี่ยน​ตลอด เพราะ​ความ​อ่าน​ง่าย​เปลี่ยน​ตาม​เฟรม

วางตัว​หนังสือ​บน​กระจก​ฝ้า​อย่างไร​ให้​อ่าน​ได้​ทุก​เฟรม

ให้​สี​พื้น​ของ​แผง​เป็น​ตัว​รับ​ประกัน​การ​อ่าน เพราะ​การ​เบลอ​ลด​ราย​ละเอียด​ของ​ภาพ​ด้าน​หลัง แต่​ไม่​ได้​ทำให้​สี​ของ​ภาพ​สม่ำเสมอ ภาพ​พื้น​หลัง​ที่​มี​ทั้ง​ส่วน​สว่าง​และ​มืด​จะ​ทำให้​ตัว​หนังสือ​สี​เดียว​อ่าน​ง่าย​ใน​บาง​ช่วง​และ​อ่าน​ยาก​ใน​บาง​ช่วง แผง​ที่​มี​พื้น​สี​ขาว​หรือ​ดำ​โปร่งแสง​บาง​ส่วน​ช่วย​ให้​ความ​ต่าง​ระหว่าง​ตัว​หนังสือ​กับ​พื้น​คงที่​กว่า ส่วน​การ​เลือก​ขนาด​และ​ตำแหน่ง​ข้อความ​บน​กราฟิก​โซ​เชีย​ล​แต่ละ​สัดส่วน​อยู่​ในขนาด​กราฟิก​โซ​เชีย​ลมี​เดีย วางข้อ​ความ​ให้​รอด​ทั้ง 4:5 และ 9:16

เจ้าของ​เว็บ​ไม่​ต้อง​อ่าน​ข้อ​กำหนด​เอง แต่​ควร​ให้​ทีม​ทำ​หน้า​เว็บ​ที่​ยัง​อ่าน​ได้​ถ้า​ราย​ละเอียด​ของ​มาตรฐาน​เปลี่ยน ข้อ​กำหนด​ยัง​เป็น​ฉบับ​ร่าง และ​เบราว์เซอร์​แต่ละ​ตัว​เริ่ม​รองรับ​ต่าง​กัน​หลาย​ปี รายการ​ด้าน​ล่าง​ใช้​ตรวจ​งาน​ก่อน​รับ​มอบ​ได้

1. ขอ​ดู​หน้า​เว็บ​ใน​โหมด​ที่​ปิด​การ​เบลอ ถ้า​ตัว​หนังสือ​ยัง​อ่าน​ได้ แปล​ว่า​มี​พื้น​สำรอง​แล้ว
2. ขอ​รายการ​ชิ้น​ส่วน​ที่​ใช้​กระจก​ฝ้า พร้อม​ระบุ​ว่า​ชิ้น​ไหน​อยู่​ใน​กล่อง​ที่​มี​แอนิเมชัน​จาง​เข้า​มา​หรือ​มี​ฟิล​เตอร์
3. ทดสอบ​บน iPhone ที่​ยัง​ใช้​ระบบ​ก่อน iOS 18 อย่าง​น้อยห​นึ่ง​เครื่อง เพื่อ​ตรวจ​ชื่อ​คำ​สั่ง​แบบ​มี​คำนำ​หน้า
4. ดู​ข้อมูล​ผู้​เข้า​ชม​ของ​เว็บ​ตัว​เอง ว่า​ผู้​ชม​ใช้​เบราว์เซอร์​และ​รุ่น​อะไร ก่อน​ตัดสิน​ว่า​จะ​ลงแรง​กับ​แผน​สำรอง​แค่​ไหน
5. เก็บ​ค่า​สี​พื้น​สำรอง​ไว้​ที่​เดียว เช่น ตัวแปร​สี​กลาง​ของ​เว็บ เมื่อ​มาตรฐาน​หรือ​แบรนด์​เปลี่ยน จะ​แก้​ได้​ครั้ง​เดียว​ทั้ง​เว็บ
6. ทบทวน​ปี​ละ​ครั้ง ว่า​ข้อ​กำหนด​ออก​ฉบับ​ใหม่​หรือ​ไม่ และ​เบราว์เซอร์​ที่​ลูกค้า​ใช้​มี​ข้อ​จำกัด​ใหม่​หรือ​เปล่า

Glassmorphism คือ​สไตล์​แผง​โปร่งแสง​ที่​เบลอ​สิ่ง​ข้าง​หลัง​ให้​เหมือน​กระจก​ฝ้า บน​หน้า​เว็บ​ทำ​ด้วย​คำ​สั่ง backdrop-filter ซึ่ง​ข้อ​กำหนด Filter Effects Module Level 2 ฉบับ 23 มกราคม 2026 ยัง​ระบุ​ว่า​ไม่มี​ฉันทา​มติ​เรื่อง​นิยาม Backdrop Root ข้อมูล​ของ MDN บอก​ว่า Chrome รองรับ​ตั้งแต่​ปี 2019 Firefox ตั้งแต่​ปี 2022 และ Safari เลิก​ต้อง​ใช้​คำนำ​หน้า​ใน​รุ่น 18 ปี 2024 หน้า​เว็บ​ที่​ใช้​กระจก​ฝ้า​จึง​ควร​มี​พื้น​สำรอง​ที่​อ่าน​ได้​เมื่อ​ไม่​เบลอ ส่วน​คลิป​และ​สไลด์​สร้าง​การ​เบลอ​เสร็จ​ใน​ไฟล์​ได้​เลย