เครื่องมือสร้าง UI ที่ทันสมัย

Glassmorphism คือเทรนด์การออกแบบ UI ที่สร้างพื้นผิวเหมือนกระจกฝ้า โดยการทำให้พื้นหลังโปร่งแสงและใช้เอฟเฟกต์เบลอ (backdrop-filter: blur()) สไตล์นี้ได้รับความนิยมและนำมาใช้อย่างแพร่หลายใน macOS/iOS ของ Apple และ Fluent Design System ของ Windows

เครื่องมือนี้มีพรีเซ็ตให้เลือกใช้งาน 12 แบบที่สามารถปรับใช้ได้ในคลิกเดียว และยังปรับฟังก์ชัน backdrop-filter ได้อิสระ 4 แบบ ได้แก่ blur, brightness, saturate และ contrast นอกจากนี้คุณยังสามารถปรับแต่งเส้นขอบ เงา และมุมโค้งผ่านสไลเดอร์ จากนั้นคัดลอกโค้ดออกมาในรูปแบบ CSS หรือ CSS Variable

backdrop-filter: blur()

เบลอพื้นที่ด้านหลังขององค์ประกอบ ยิ่งค่าสูง เอฟเฟกต์กระจกฝ้ายิ่งชัดเจน นี่คือคุณสมบัติหลักของ Glassmorphism

backdrop-filter: brightness()

ปรับความสว่างของพื้นหลัง ค่าเริ่มต้นคือ 100% สว่างเป็นสองเท่าเมื่อเป็น 200% และมืดสนิทที่ 0%

backdrop-filter: saturate()

ปรับความอิ่มตัวของสีพื้นหลัง ค่าเริ่มต้นคือ 100% สีเอกรงค์ที่ 0% และสีที่อิ่มตัวมากเกินไปที่ 200%

backdrop-filter: contrast()

ปรับความเปรียบต่างของสีพื้นหลัง ค่าเริ่มต้นคือ 100% การเพิ่มค่านี้จะเน้นความแตกต่างระหว่างความสว่างและความมืดให้ชัดเจนขึ้น

Vendor Prefix

แนะนำให้เพิ่ม -webkit-backdrop-filter เพื่อรองรับเบราว์เซอร์ Safari โค้ดที่สร้างจากเครื่องมือนี้จะรวมไว้ให้โดยอัตโนมัติ

Q.backdrop-filter รองรับทุกเบราว์เซอร์หรือไม่?

คุณสมบัตินี้รองรับใน Chrome, Edge, Safari และ Firefox เวอร์ชันล่าสุด ไม่รองรับ IE11 แต่ขอแนะนำให้ใช้สีพื้นหลังแบบกึ่งโปร่งใสเป็นทางเลือกสำรองเพื่อรักษาหน้าตาการแสดงผลขั้นต่ำไว้

Q.Neumorphism และ Glassmorphism แตกต่างกันอย่างไร?

Glassmorphism ใช้ backdrop-filter เพื่อสร้างเอฟเฟกต์ 'กระจกฝ้า' และแสดงการซ้อนทับขององค์ประกอบต่างๆ (แกน Z) ส่วน Neumorphism เป็นสไตล์ที่ใช้แสงและเงาของ box-shadow เพื่อแสดงความ 'นูนและเว้า'

Q.มีผลกระทบต่อประสิทธิภาพหรือไม่?

backdrop-filter ใช้การประมวลผลผ่าน GPU ดังนั้นจึงไม่มีปัญหาหากใช้งานในระดับที่พอเหมาะ อย่างไรก็ตาม การใช้ค่าความเบลอ (blur) สูงกับทั้งหน้าเว็บอาจทำให้เฟรมเรตลดลงได้

Q.สามารถนำโค้ดที่สร้างขึ้นไปใช้ได้เลยหรือไม่?

ได้ คุณสามารถคัดลอกโค้ด CSS ไปวางในสไตล์ชีตของคุณเพื่อใช้งานได้ทันที และสามารถเปลี่ยนชื่อคลาสได้ตามต้องการ