Liquid Glass ที่สร้างด้วย CSS

• อธิบายวิธีจำลองเอฟเฟกต์หลักของ ภาษาออกแบบ Liquid Glass ที่ Apple เปิดตัวในงาน WWDC25 ด้วยการผสาน CSS และ SVG filter
• สร้างเลเยอร์ต่าง ๆ ที่เลียนแบบวัสดุกระจกจริงทีละขั้นด้วย CSS/SVG เช่น Specular Highlights, Blur, Color Filter, Refraction, Edge/Ripple Distortion, Chromatic Aberration
• การทำเอฟเฟกต์หลักใช้เทคนิค CSS·SVG ขั้นสูง เช่น backdrop-filter, box-shadow, SVG DisplacementMap, Turbulence, ColorMatrix, Offset, Blend
• ความเข้ากันได้ของเบราว์เซอร์เน้น Chrome เป็นหลัก โดยใน Safari/Firefox นั้น SVG filter ไม่ทำงาน จึงเหลือเพียง Blur·Shadow เท่านั้น
• ยิ่งเอฟเฟกต์ซับซ้อนมากเท่าไร การใช้ GPU ก็ยิ่งสูง และหากใช้พร่ำเพรื่อทั่ว UI อาจทำให้ประสิทธิภาพลดลง จึงแนะนำให้ใช้เฉพาะบริเวณสำคัญ

---

Liquid Glass คืออะไร?

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

เลเยอร์หลักของเอฟเฟกต์และวิธีทำ

1. Specular Highlights (แสงสะท้อนบนกระจก)

• เพิ่มไฮไลต์ที่ขอบกระจกเพื่อเน้นความลึกและมิติ
• ใช้ inset box-shadow ของ CSS ซ้อนกันหลายชั้น เพื่อถ่ายทอดความรู้สึกว่ามีแสงสะท้อนจากหลายมุม

  box-shadow:  
      inset 10px 10px 20px rgba(153, 192, 255, 0.1),  
      inset 2px 2px 5px rgba(195, 218, 255, 0.2),  
      inset -10px -10px 20px rgba(229, 253, 190, 0.1),  
      inset -2px -2px 30px rgba(247, 255, 226, 0.2);  
  

• อ้างอิง [Fresnel Effect] เพื่อปรับความเข้มของการสะท้อนแสงให้ดูเป็นธรรมชาติ

2. Blur (เบลอพื้นหลัง)

• ใช้ backdrop-filter: blur(20px); เพื่อใส่ Blur เฉพาะกับคอนเทนต์ที่อยู่ด้านหลังกระจก
• เอฟเฟกต์นี้จะถูกใช้กับคอนเทนต์พื้นหลังเท่านั้น ไม่ได้ใช้กับตัวองค์ประกอบโดยตรง

3. Color Filter (การเน้นสี)

• เพิ่ม backdrop-filter เช่น contrast(80%) saturate(120%) เพื่อทำให้คอนเทนต์หลังแผ่นกระจกมี ความอิ่มสีเพิ่มขึ้นและคอนทราสต์ลดลง จนได้โทนสีที่ชัดเจน

  backdrop-filter: blur(20px) contrast(80%) saturate(120%);  
  

4. การจำลองการหักเห (Refraction)

• เอฟเฟกต์การหักเห ที่ทำให้พื้นหลังดูบิดเบี้ยวตามความโค้งของกระจกนั้น มีข้อจำกัดหากใช้ CSS อย่างเดียว จึงต้องผสานกับ SVG filter

• Displacement Map: ใช้ gradient ของ SVG เพื่อสร้าง distortion map (Identity Map) ที่บีบพิกเซลบริเวณขอบและยืดส่วนกลาง

  • ในตัวอย่าง SVG ใช้กราเดียนต์สีแดง/น้ำเงินเพื่อกำหนดปริมาณการเลื่อนพิกเซลในแกน X/Y
  • ปรับ gradient ramp เพื่อออกแบบรูปแบบการบีบขอบและขยายตรงกลาง
  • แปลง SVG เป็น Data URL แล้วโหลดด้วย feImage เพื่อนำไปใช้แปลงพิกัดใน feDisplacementMap

• Ripple Distortion: ใช้การผสาน feTurbulence (เท็กซ์เจอร์นอยส์) กับ feDisplacementMap เพิ่มเติม เพื่อถ่ายทอดคลื่นละเอียดบนผิวกระจก

• Chromatic Aberration (ความคลาดสี): ใช้ feColorMatrix, feOffset และ feBlend แยกและเลื่อนแต่ละช่องสี RGB ก่อนนำมาผสานกัน เพื่อเลียนแบบการกระจายตัวของแสงที่เห็นในกระจกจริง

วิธีนำเอฟเฟกต์ CSS/SVG ไปใช้

• หลังจากกำหนด SVG filter แล้ว ให้ใช้ filter: url(#filterId); เพื่อนำไปใช้กับองค์ประกอบ DOM
• filter chain ที่รวมทุกเอฟเฟกต์เข้าด้วยกันสามารถจำลองทั้งพื้นผิวแบบแผ่นกระจก การบิดเบือนของแสง และการดัดแปลงสีได้พร้อมกัน

ข้อควรระวังด้านความเข้ากันได้และประสิทธิภาพ

• SVG displacement filter รองรับได้สมบูรณ์เฉพาะบน Chrome ส่วน Safari, Firefox ฯลฯ จะเห็นเอฟเฟกต์ได้จำกัด (เหลือเพียง Blur/Shadow)
• หากมีองค์ประกอบกระจกจำนวนมากหรือมีการใส่อนิเมชัน ภาระของ GPU จะสูง และประสิทธิภาพการเรนเดอร์จะลดลง
• ในทางปฏิบัติ เหมาะกับการใช้เฉพาะบางส่วนของ UI ที่ต้องการเน้น เช่น ส่วนฮีโร่/ฟีเจอร์

อ้างอิงและเครดิต

• วิธีการนี้อ้างอิงจาก "A Deep Dive Into The Wonderful World Of SVG Displacement Filtering" ของ Smashing Magazine และเอกสารทางการของ Apple Liquid Glass
• หัวใจสำคัญคือการผสานการใช้งานเทคโนโลยีเว็บสมัยใหม่ เช่น SVG displacement, CSS backdrop-filter และ box-shadow

[geek12356]

อันที่คนนี้ทำดูเป็นธรรมชาติกว่าจริง ๆ นะ
https://v0.dev/chat/dynamic-frame-layout-1VUCCecq7Uy

[zabefofoon]

อันนี้ใช้กับ Safari ไม่ได้ครับ

[bobross0]

ยังดูไม่ค่อยเป็นธรรมชาติอยู่ดีเวลาเอาไปทำบนเว็บ 555