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

สร้าง Glassmorphism

สร้างเอฟเฟกต์ glassmorphism ด้วย CSS backdrop filters สร้างดีไซน์กระจก frosted สำหรับ UI สมัยใหม่พร้อมเอฟเฟกต์ความโปร่งใสและความเบลอ

การปรับแต่ง

สีพื้นหลัง

สีข้อความ

เบลอ: 10px

ความทึบ: 30%

รัศมีขอบ: 16px

ขอบ ความกว้าง: 1px

ความกว้าง: 300px

ความสูง: 200px

ค่าที่ตั้งไว้

ตัวอย่างสด

Glassmorphism

เอฟเฟกต์กระจกสมัยใหม่

โค้ดที่สร้าง

.glassmorphism {
  background: #ffffff4d;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid #ffffff26;
  box-shadow: 0 8px 32px 0 #ffffff13;
  color: #1f2937;
  width: 300px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

เคล็ดลับการออกแบบ

Tip 1

💡 ใช้ glassmorphism สำหรับการ์ด โมดัล และองค์ประกอบการนำทาง

Tip 2

🎨 ใช้งานได้ดีที่สุดกับพื้นหลังสีสันสดใสหรือไล่ระดับสี

Tip 3

⚡ สร้างสมดุลระหว่างความเบลอและความโปร่งใสเพื่อการอ่านที่เหมาะสม

Tip 4

📱 พิจารณาการเข้าถึง - ตรวจสอบให้แน่ใจว่ามีความคมชัดเพียงพอสำหรับข้อความ

Loading tool...