สร้าง Glassmorphism
สร้างเอฟเฟกต์ glassmorphism ด้วย CSS backdrop filters สร้างดีไซน์กระจก frosted สำหรับ UI สมัยใหม่พร้อมเอฟเฟกต์ความโปร่งใสและความเบลอ
Loading tool...
สร้าง Glassmorphism คืออะไร?
Glassmorphism generator สร้าง frosted glass UI effect ที่นิยมโดยใช้ CSS backdrop-filter ปรับ blur ความโปร่งใส และการตั้งค่าขอบเพื่อสร้าง card designs ที่ทันสมัยและสวยงาม
ประโยชน์หลัก
- แก้ไขแบบ visual
- preview สด
- CSS พร้อมคัดลอก
- ข้อมูล browser support
กรณีการใช้งาน
- •card designs
- •modals
- •navigation
- •hero overlays
วิธีสร้าง Glassmorphism
- ตั้ง blur amount: ปรับระดับ backdrop blur
- เลือกสี: เลือก background และสีขอบ
- ปรับความโปร่งใส: ตั้งระดับ opacity
- คัดลอก CSS: คัดลอก glassmorphism CSS
คุณสมบัติหลัก
- สร้าง CSS glassmorphism
- ควบคุม blur และโปร่งใส
- ตัวเลือกเส้นขอบและเงา
- ปรับสีพื้นหลัง
- ดูตัวอย่างสดบนรูป
- คัดลอก CSS backdrop-filter
คำถามที่พบบ่อย
glassmorphism คืออะไร?
Glassmorphism เป็นเทรนด์การออกแบบ UI ที่มี frosted glass effects พร้อมความโปร่งใส blur และขอบบางๆ
CSS properties อะไรสร้าง effect นี้?
ใช้ backdrop-filter: blur(), background ด้วยสี rgba/transparent ขอบบางๆ และ box-shadow เลือกได้
backdrop-filter รองรับดีไหม?
browsers สมัยใหม่รองรับ Safari ต้อง -webkit-backdrop-filter prefix ทดสอบบน browsers เป้าหมาย
ควรใช้ blur เท่าไหร่?
ค่าทั่วไป: 8-20px blur blur สูงกว่า = ดู frosted มากกว่า ปรับความโปร่งใสให้เสริม blur