ตัวสร้าง CSS สำหรับเอฟเฟกต์กระจกความละเอียดสูง

 (glass3d.dev)
5 คะแนน โดย GN⁺ 2025-07-04 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • glass3d generator เป็นเครื่องมือที่ให้คุณปรับค่าตั้งค่า แล้วดูตัวอย่างและคัดลอก CSS พื้นผิวกระจก ได้ทันที
  • ค่าปรับหลักประกอบด้วย blur, brightness, saturation ของ backdrop-filter รวมถึงสีและการเลือก texture
  • สีถูกจัดการด้วย HSL และค่า alpha โดยค่าตัวอย่างคือ hsl(189 80% 10% / 0.2)
  • texture สามารถเลือกได้จาก rice paper, egg shell, ink jet, coarse, topology
  • CSS ที่สร้างขึ้นจะแบ่ง background filter, noise texture, inner shadow และ content layer โดยผสมผสาน .glass3d, ::before, ::after และ z-index ขององค์ประกอบลูก

ค่าที่ปรับได้ใน glass3d generator

  • เมื่อเปลี่ยนค่าตั้งค่า ผลลัพธ์จะสะท้อนบนอินเทอร์เฟซเองทันที
  • CSS ที่เสร็จแล้วสามารถคัดลอกไปใช้งานได้
  • รายการตั้งค่าหลักมีดังนี้
    • backdrop-filter
    • blur
    • brightness
    • saturation
    • color
    • texture

โครงสร้าง CSS ที่ถูกสร้างขึ้น

  • คลาส .glass3d กำหนด CSS variables และฐานสำหรับ layer
    • --filter-glass3d: blur(32px) brightness(0.85) saturate(2.5)
    • --color-glass3d: hsl(189 80% 10% / 0.2)
    • --noise-glass3d: egg-shell.png ของ transparenttextures.com
    • ใช้ position: relative, z-index: 4 และ box-shadow หลายระดับ
  • .glass3d::before ใช้ background filter และ texture
    • ใช้ var(--filter-glass3d) กับ -webkit-backdrop-filter และ backdrop-filter
    • ใส่ตัวแปรสีและตัวแปร noise ลงใน background-color และ background-image ตามลำดับ
    • ตั้งค่า background-size: 100px, background-repeat: repeat
  • .glass3d::after เพิ่ม เงาไฮไลต์ด้านใน
    • ใช้ค่า inset box-shadow หลายค่า
  • .glass3d > * ใช้ position: relative และ z-index: 6 เพื่อให้เนื้อหาแสดงอยู่ด้านบน

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-07-04
ความคิดเห็นบน Hacker News

  • วิธีนี้มีปัญหาตรงที่ใช้เฉพาะพิกเซลที่อยู่ด้านหลังพื้นผิวโดยตรงมาทำเบลอ ซึ่งอธิบายให้เห็นได้ดีใน https://www.joshwcomeau.com/css/backdrop-filter/#the-issue
    น่าอ่านควบคู่กับการถกเถียงใน https://news.ycombinator.com/item?id=42302907 ถ้าพื้นหลังเคลื่อนที่อยู่ด้านล่าง ปัญหา การเบลอเฉพาะพิกเซลด้านหลังโดยตรง ก็ถือว่าสำคัญพอสมควร แต่ถ้าเป็นพื้นหลังนิ่ง โดยทั่วไปมักไม่ใช่เรื่องใหญ่

    • ผมอ่านบทความยอดเยี่ยมของ Josh และลองทำตามทูโทเรียลแล้ว แต่ติดปัญหาตรงส่วน การจัดการ border-radius ด้วย SVG mask
      กับองค์ประกอบที่ฮาร์ดโค้ดไว้ทำงานได้ดี แต่ยังต้องหาวิธีให้มันทำงานในไลบรารีคอมโพเนนต์ทั้งชุดที่ border-radius เปลี่ยนตามแบรนด์ของผู้ใช้และ container query
    • วิธีแก้ของ Josh เองก็ดูผิดจากสัญชาตญาณเหมือนกัน เหมือนจะสมมติว่าองค์ประกอบที่อยู่ใกล้เป็น วัตถุเรืองแสง แต่คงยากจะบอกว่า “วัสดุ” บนเว็บมีคุณสมบัติทางฟิสิกส์แบบนั้นโดยพื้นฐาน
      ผมกลับมองว่าวัสดุพื้นฐานใกล้เคียงกับกระดาษมากกว่า
    • บอกยากว่าฝั่งไหนถูกกว่า วิธีพื้นฐานเป็นการประมาณวัตถุที่อยู่หลังแก้วฝ้าโดยตรง ส่วนวิธีที่ปรับแล้วจำลองวัตถุที่อยู่ไกลกว่ามาก
      สำหรับผม เวอร์ชันที่ปรับแล้วขัดกับ เบาะแสด้านความลึก จึงดูรบกวนสายตากว่าและผิดมากกว่า

  • ดูดีทีเดียว แต่ถ้าขาด คุณสมบัติการหักเหแสง ของแก้วไป ก็จะเสียความรู้สึกแบ่งเลเยอร์อย่างชัดเจน ซึ่งผมมองว่าเป็นผลงานสำคัญที่สุดของ Liquid Glass
    Material มีเอกสารสำหรับนักออกแบบที่ยอดเยี่ยม แสดงด้วย 3D มุมด้านข้างว่าแอปควรถูกประกอบจากเลเยอร์ที่เคลื่อนไหวอย่างสอดคล้องกัน แต่พอรวมเป็น 2D แล้วกลับหาว่าฟังก์ชันไหนอยู่ตรงไหนได้ยากมาก ผู้คนมักมองไม่เห็นปุ่มแอ็กชันตรงมุมบ่อยมากจริง ๆ
    การเคลื่อนไหวช่วยแยกโครมออกจากคอนเทนต์ได้บ้าง แต่มีองค์ประกอบที่กำหนดภาพให้ชัดเจนน้อยเกินไป ผมคิดว่าข้อดีที่สุดของ Liquid Glass คือ การบิดเบือนบริเวณขอบ เมื่อคอนเทนต์เคลื่อนที่ จะเกิดการเคลื่อนไหวแบบไม่เชิงเส้น และการมองเห็นของมนุษย์จับสิ่งนั้นได้ทันที
    ภาพหน้าจอนิ่งมักดูไม่ดีเสมอไป แต่เมื่อเคลื่อนไหว มันแยกองค์ประกอบได้ดีกว่าสิ่งที่เคยเห็นมามาก องค์ประกอบการหักเหแสงสำคัญที่ใช้ประโยชน์จากการตรวจจับการเคลื่อนไหวของมนุษย์อย่างมากนั้นหายไปจากที่นี่
    ก่อนหน้านี้เคยเห็นเดโมเว็บที่ยอดเยี่ยมอีกตัวหนึ่ง แต่ตอนนี้หาเจอยาก แทนกัน เดโมนี้ประสิทธิภาพบนมือถือไม่ดีและภาพก็ดูด้อยกว่า แต่แสดงทีละขั้นได้ดีว่างานซับซ้อนแค่ไหน การทำการบิดเบือนขอบด้วย SVG filter อย่างเดียวเป็นเส้นทางที่ค่อนข้างโหด: https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...
    ผมยังเจอชุดความพยายามทำ Liquid Glass (CodePen Spark) ด้วย และลิงก์ที่สองถือเป็นตัวอย่างที่ทำออกมาได้ค่อนข้างดีด้วย SVG ที่กำหนดไว้ล่วงหน้าและฮาร์ดโค้ดอย่างเฉพาะเจาะจงมาก: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • ผมคิดว่า Apple สร้าง คูเมือง ที่ฉลาดด้วย Liquid Glass เวอร์ชันที่แย่กว่านั้นทำได้ง่าย แต่เหมือนเลือกเอฟเฟกต์ที่ทำให้ถูกต้องจริง ๆ ได้ยากมาก
      ผู้คนเห็นแก้วจริงทุกวัน จึงมีสัญชาตญาณว่าอะไรดูจริงและถูกต้อง ดังนั้นงานเลียนแบบจึงดูแย่กว่าอย่างชัดเจน และ Apple ก็ยังรักษาภาพลักษณ์สินค้าที่ “ดูพรีเมียม” ไว้ได้
    • เห็นด้วยว่าการบิดเบือนขอบของ Liquid Glass ดูเท่ และตั้งใจว่าจะลองทำซ้ำเองในภายหลัง
      สำหรับโปรเจกต์ปัจจุบัน เป้าหมายคือทำวัสดุที่ดูขัดเกลา ทำงานสม่ำเสมอข้ามเบราว์เซอร์ และไม่ใช้ 3D จริง ๆ ที่บอกว่าเอฟเฟกต์จะเห็นชัดขึ้นเมื่อเคลื่อนไหวบนพื้นหลังคงที่ก็ถูกแล้ว ในไซต์เดโมของไลบรารีที่กำลังทำอยู่ก็ทำแบบนั้น แต่ยังไม่พร้อม
    • การที่ไม่มีเอฟเฟกต์หักเหแสงกลับเป็นเรื่องดี ผมรู้สึกว่าแก้วฝ้าก็คลุมเครืออยู่แล้ว ส่วน เอฟเฟกต์หักเหแสง นี่ไม่ชอบจริง ๆ มันรบกวนสายตามาก และในบางสถานการณ์ก็ต้องดูแย่อยู่เสมอ
      ผมรู้ว่าแก้วจริงทำงานแบบนั้น แต่ไม่อยากต้องสนใจ เหมือนหยิบเอาส่วนที่แย่ที่สุดของ skeuomorphism มาแล้วผลักให้หนักขึ้นสองเท่า และแม้ผมจะเป็นคนที่ชอบยุคก่อน iOS 7 มากกว่า ก็ยังรู้สึกแบบนั้น

  • เป็นเอฟเฟกต์ที่เจ๋ง แต่สำหรับผมมันยังไม่รู้สึกเหมือนแก้วจริง
    ความต่างที่เห็นได้ทันทีที่สุดคือแสงไม่ได้โต้ตอบกับ bevel ผมคาดว่าแสงควรย้อนเข้าไปในแก้วอีกครั้งและส่งผลต่อทั้งแสงเงาและสีด้วย แค่ใส่เบลออย่างเดียวไม่พอ
    อีกอย่าง แก้วอาจมีเงาของตัวเองและ ลวดลายการรวมแสง ที่น่าสนใจได้ ที่นี่มองเห็นเงาอยู่ แต่รู้สึกเหมือน drop shadow ธรรมดา จึงดูเหมือนการ์ดแบน ๆ มากกว่าจะเป็นวัตถุฟิสิกส์ 3D ที่เป็นส่วนหนึ่งของโฟลว์ใหม่
    อย่างไรก็ดี การเลียนแบบด้วย CSS อย่างเดียวไม่ใช่เรื่องง่าย และ shader ที่รันบน GPU ดูเหมาะกว่ามาก

    • ถ้าทำด้วย CSS ไม่ได้ ก็ไม่รู้ว่าควรทำอย่างไร จะใช้เอฟเฟกต์ GPU shader กับ div ทั่วไปได้อย่างไร? ถ้าใช้เอฟเฟกต์ GPU กับ HTML พื้นฐานไม่ได้ และต้องทำกับองค์ประกอบคัสตอมอย่างการผสม Canvas แบบตามใจชอบ บางทีการสร้าง rendering engine ใหม่ทั้งชุดที่รองรับเอฟเฟกต์ GPU อาจจะดีกว่า
      ผมมองว่า HTML ตายแล้ว สำหรับการส่งข้อความ แท็กไม่กี่อันก็พอ ส่วนที่เหลือส่วนใหญ่ถูกใช้ทำให้เว็บเพจกลายเป็นระเบิดโฆษณา ดังนั้นเริ่มใหม่ด้วยแท็ก <text> และการผสานกับ GPU ที่ดีกว่า แล้วตัดส่วนที่เหลือออกไปน่าจะดีกว่า

  • ผมทำเวอร์ชัน JavaScript ที่ หักเห องค์ประกอบบนหน้าเว็บจริง ๆ: https://real-glass.vercel.app/

    • ใน Safari เอฟเฟกต์ฝ้า ไม่ทำงาน

  • กำลังรวบรวมของพวกนี้อยู่: https://github.com/swyxio/spark-joy
    แหล่งข้อมูลอื่น ๆ ก็มีเครื่องมือสร้าง CSS ฟรีที่อิงตามสเปกดีไซน์ glassmorphism https://ui.glass/generator/, เฮดเดอร์คงที่แบบกระจกฝ้า https://www.joshwcomeau.com/css/backdrop-filter/, glassy glassmorphism codepen และ in context

    .blur-and-rotate {  
border-radius: 20px;  
backdrop-filter: blur(20px) hue-rotate(120deg);  
-webkit-backdrop-filter: hue-rotate(120deg);  
}
    • เคยเจอเครื่องมือสร้างฟอนต์ ASCII แต่ตอนนี้หาไม่เห็น เลยขอทิ้งเครื่องมือที่ผมใช้อยู่ไว้ตัวหนึ่ง: https://patorjk.com/software/taag/#p=testall&f=Graffiti&t=He...

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

    • ใช่เลย ไม่คิดว่าจะต้องใช้ทริกเยอะขนาดนี้ในการทำให้สำเร็จ
      สัญชาตญาณถูกแล้ว และส่วนที่กินทรัพยากรมากที่สุดคือ การเบลอ ของ backdrop-filter ยิ่งค่าเบลอมากเท่าไร ก่อนเรนเดอร์ก็ต้อง “อ้างอิง” พิกเซลข้างเคียงมากขึ้นเท่านั้น
      อีกองค์ประกอบที่มีต้นทุนสูงคือ ต้องวาดใหม่ตลอดเมื่อเลื่อนหน้า หรือเมื่อพื้นหลังวิดีโอทำให้ลักษณะของกระจกเปลี่ยนไป
    • บางครั้งแค่จะ “จัดให้อยู่กึ่งกลาง” ก็ยังต้องใช้ ทริก 5 ชั้น เหมือนกัน

  • ดูเหมือนจะใช้เทคนิคคล้ายกับการทำกระจกของผม: https://news.ycombinator.com/item?id=42225481
    โดยเฉพาะส่วนที่ใช้ box-shadow หนัก ๆ นั้นคล้ายกัน

    • โปรเจกต์ดูเท่มาก ดีใจที่ไม่ได้มีแค่ผมคนเดียวที่ขุดลงไปกับเงา 5 ชั้นขึ้นไป โดยเฉพาะการเพิ่ม Light Rays น่าประทับใจมาก

  • ปัญหาเล็กน้อย: เงาระหว่างด้านบนกับพื้นที่เลื่อนที่มี toggle/โค้ดจะหายไปเมื่อเลื่อนลง น่าจะควรถูกซ่อนไว้ตอนแรกแล้วค่อยปรากฏขึ้นมากกว่า

    • จับได้ดีมาก ไม่ใช่ปัญหา fade-in แต่เป็นเพราะเงาเลื่อนหลุดออกไปนอกหน้าจอเฉย ๆ
      box-shadow แบบ “overhang” เหล่านั้นถูกออกแบบให้ใช้ภายในองค์ประกอบ ไม่ใช่ให้ทอดลงมาจากองค์ประกอบใดองค์ประกอบหนึ่ง ซึ่งกรณีนี้ทำให้ตระหนักว่าควรใช้เงาแบบหลังแทน

  • บนมือถือของผม การเลื่อนเนื้อหาค่อนข้างช้า อยากรู้ว่ามีเอฟเฟกต์เลื่อนอื่นที่ตั้งใจทำให้ช้าหรือเปล่า หรือเป็นผลข้างเคียงของ เอฟเฟกต์กระจก

    • น่าสนใจ แต่ในหน้านี้ไม่มีเอฟเฟกต์เลื่อนตรงไหนเลย อยากทราบว่าใช้อุปกรณ์ เบราว์เซอร์ และอินเทอร์เน็ตระดับไหนอยู่
    • บน M4 กับ RAM 128GB ทำงานได้ดี

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

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