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

> ที่มา: https://phygital.co.th/insights/glassmorphism-frosted-glass-ui-design-guide · เผยแพร่ 4 กันยายน 2566 · อ่าน 11 นาที · โดย PARANATH PANARATANA

Glassmorphism บนเว็บอาศัยคำสั่ง backdrop-filter ซึ่งข้อกำหนดของ CSS ยังเป็นฉบับร่าง และ Safari เพิ่งเลิกต้องใช้คำนำหน้าในรุ่น 18 ปี 2024 ควรเตรียมแผนสำรองอย่างไร

## Key Takeaways

- **Glassmorphism คือสไตล์ที่วางแผงโปร่งแสงไว้เหนือภาพหรือสีด้านหลัง แล้วเบลอส่วนที่อยู่หลังแผงให้ดูเหมือนกระจกฝ้า** — บนหน้าเว็บ เอฟเฟกต์นี้ทำด้วยคำสั่ง CSS ชื่อ backdrop-filter ซึ่งอยู่ในข้อกำหนด Filter Effects Module Level 2 ของ CSS Working Group
- **ข้อกำหนดฉบับนี้ยังเป็น Editor's Draft (ฉบับ 23 มกราคม 2026) และเขียนเองว่ายังไม่มีฉันทามติของคณะทำงาน** — โดยเฉพาะนิยามของ Backdrop Root ซึ่งเป็นตัวกำหนดว่าเบราว์เซอร์จะเบลออะไรบ้าง
- **ข้อมูลความเข้ากันได้ของ MDN ระบุว่า Chrome รองรับตั้งแต่รุ่น 76 (กรกฎาคม 2019) Firefox รุ่น 103 (กรกฎาคม 2022) และ Safari รองรับแบบไม่ต้องใช้คำนำหน้าในรุ่น 18 (กันยายน 2024)** — หน้าเว็บที่ใช้กระจกฝ้าจึงต้องมีพื้นหลังสำรองที่อ่านได้เมื่อเครื่องไม่เบลอ

เจ้าของเว็บที่อยากได้แผงเมนูแบบกระจกฝ้า มักอนุมัติจากภาพนิ่งในไฟล์ออกแบบ โดยยังไม่รู้ว่าบนหน้าเว็บจริงเอฟเฟกต์นี้ทำงานอีกแบบ บทนี้อธิบาย Glassmorphism จากมุมที่ต้องรู้ก่อนสั่งงาน คือเบราว์เซอร์ทำอะไรกับพื้นหลัง และเครื่องไหนยังไม่รองรับ แหล่งหลักคือข้อกำหนด [Filter Effects Module Level 2](https://drafts.csswg.org/filter-effects-2/) ฉบับ Editor's Draft ลงวันที่ 23 มกราคม 2026 ซึ่งมี Dean Jackson จาก Apple และ Chris Harrelson จาก Google เป็นบรรณาธิการ ร่วมกับ[ข้อมูลความเข้ากันได้ของเบราว์เซอร์](https://github.com/mdn/browser-compat-data/blob/main/css/properties/backdrop-filter.json) ที่ MDN เปิดเป็นข้อมูลสาธารณะ

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

## Glassmorphism คืออะไร

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

ความต่างจาก[Neumorphism](https://phygital.co.th/insights/neumorphism-soft-ui-design-trend-guide) อยู่ที่วัสดุ 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 ขึ้นไปจะไม่ถูกนำมาเบลอ ข้อกำหนดระบุว่าชิ้นส่วนแบบต่อไปนี้สร้าง Backdrop Root

| ชิ้นส่วนที่สร้าง Backdrop Root                | ตัวอย่างที่เจอในงานจริง                  |
| ------------------------------------------------ | --------------------------------------------- |
| ชิ้นส่วนรากของเอกสาร (HTML)                  | ทั้งหน้าเว็บ                                |
| ชิ้นส่วนที่มี filter ค่าอื่นนอกจาก none     | กล่องที่ทำภาพขาวดำหรือปรับความสว่าง  |
| ชิ้นส่วนที่ opacity ต่ำกว่า 1                 | กล่องที่ค่อย ๆ จางเข้ามาตอนเลื่อนหน้า  |
| ชิ้นส่วนที่มี mask หรือ clip-path             | ภาพที่ตัดเป็นรูปทรง                      |
| ชิ้นส่วนที่มี backdrop-filter เอง             | แผงกระจกที่ซ้อนอยู่ในแผงกระจกอีกชั้น |
| ชิ้นส่วนที่ mix-blend-mode ไม่ใช่ normal       | ตัวหนังสือที่ผสมสีกับภาพด้านหลัง      |
| ชิ้นส่วนที่ will-change ระบุคุณสมบัติข้างบน | กล่องที่เตรียมทำแอนิเมชัน                 |

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

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

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

## แต่ละเบราว์เซอร์รองรับตั้งแต่เมื่อไร

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

| เบราว์เซอร์              | รองรับตั้งแต่รุ่น | วันออกรุ่นนั้น | หมายเหตุจาก MDN                                                                 |
| ------------------------ | ------------------- | ----------------- | -------------------------------------------------------------------------------- |
| Chrome                   | 76                  | 30 ก.ค. 2019      | Chrome บน Android ใช้ข้อมูลเดียวกัน                                            |
| Edge                     | 79                  | 15 ม.ค. 2020      | รุ่น 17-78 ใช้แบบมีคำนำหน้า -webkit-                                         |
| Firefox                  | 103                 | 26 ก.ค. 2022      | ก่อนรุ่น 123 ไม่ทำงานบนเครื่องที่ระบบไม่รู้ยี่ห้อชิปกราฟิก             |
| Safari และ Safari บน iOS | 18                  | 16 ก.ย. 2024      | ตั้งแต่รุ่น 9 (ก.ย. 2015) ถึงก่อนรุ่น 18 ต้องเขียนแบบมีคำนำหน้า -webkit- |

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

เพราะ 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](https://phygital.co.th/insights/social-media-graphic-size-ratio-guide)

## เตรียมหน้าเว็บให้รับการเปลี่ยนมาตรฐานของกระจกฝ้า

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

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 หน้าเว็บที่ใช้กระจกฝ้าจึงควรมีพื้นสำรองที่อ่านได้เมื่อไม่เบลอ ส่วนคลิปและสไลด์สร้างการเบลอเสร็จในไฟล์ได้เลย

## คำถามที่พบบ่อย (FAQ)

### Glassmorphism ทำให้หน้าเว็บโหลดช้าลงหรือไม่

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

### ทำกระจกฝ้าในโปรแกรมออกแบบเหมือนกับบนเว็บหรือไม่

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

### ข้อมูลความเข้ากันได้ของ MDN เชื่อถือได้แค่ไหน

เป็นชุดข้อมูลเปิดบน GitHub ที่นักพัฒนาแก้ไขร่วมกันและใช้เป็นแหล่งของตารางความเข้ากันได้บนหน้าเอกสาร MDN ข้อมูลบอกรุ่นที่รองรับและข้อจำกัดที่รู้แล้ว แต่ไม่ได้บอกว่าผู้ใช้ในประเทศไหนใช้เบราว์เซอร์รุ่นใดเป็นสัดส่วนเท่าไร จึงควรใช้คู่กับข้อมูลผู้เข้าชมเว็บของตัวเอง

### Glassmorphism เหมาะกับหน้าเว็บแบบไหน

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

### ถ้าแผงกระจกซ้อนกันหลายชั้นจะเกิดอะไรขึ้น

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

### ถ้าไม่อยากพึ่งการเบลอของเบราว์เซอร์ มีสไตล์อื่นให้เลือกไหม

มี สไตล์ที่ใช้พื้นสีทึบ ขอบหนา และเงาแข็งแบบ[Neobrutalism](https://phygital.co.th/insights/neobrutalism-bold-raw-web-design-guide) ไม่ต้องพึ่งการเบลอเลย ส่วนแนวที่ตัดเงาและพื้นผิวออกเกือบทั้งหมดอยู่ใน[Flat Design](https://phygital.co.th/insights/flat-design-ui-history-guide)

## แผงกระจกฝ้าที่สวยบนเครื่องของทีมออกแบบ อาจอ่านไม่ออกบนมือถือของลูกค้าที่ยังไม่อัปเดตระบบ

ให้ PHYGITAL AGENCY ตรวจหน้าเว็บที่ใช้กระจกฝ้าบนเครื่องหลายรุ่น หรือทำแผงกระจกฝ้าในคลิปและสไลด์ให้เห็นเหมือนกันทุกเครื่อง

- [นัดประชุมผ่าน Google Meet](https://calendar.app.google/DotQdE7Ca8LZG6Us5)
- [เพิ่มเพื่อนใน LINE](https://lin.ee/J8Qq8Do)