ข้ามไปยังเครื่องมือ
JoeLucky

กด ★ ที่เครื่องมือเพื่อบันทึก

หมวดหมู่เครื่องมือ

แปลงโค้ดเป็นรูปภาพสร้างไล่สี CSSGlassmorphism CSSสร้าง Box Shadowสร้าง CSS Loaderสร้าง SVG BlobSVG เป็น PNGตรวจความต่างสีแปลง PX / REM / EM
JoeLucky

เครื่องมือออนไลน์ที่ใช้งานได้จริง รวมไว้ในที่เดียว

นโยบายความเป็นส่วนตัวข้อกำหนดการให้บริการ

© 2026 JoeLucky®. สงวนลิขสิทธิ์

  1. JoeLucky
  2. /CSS และการออกแบบ
  3. /Glassmorphism CSS

Glassmorphism CSS

สร้างโค้ดเบลอพื้นหลังและขอบโปร่งแสงแบบเรียลไทม์

CSS และการออกแบบ ที่คล้ายกัน

ดูทั้งหมด
แปลงโค้ดเป็นรูปภาพ

เปลี่ยนโค้ดสั้น ๆ ให้เป็นภาพหน้าจอที่สวยงาม

เปิด →
สร้างไล่สี CSS

ออกแบบไล่สีแบบเส้นตรง วงกลม และกรวยด้วยภาพ แล้วคัดลอก CSS ได้ทันที

เปิด →
สร้าง Box Shadow

สร้างเงานุ่ม ๆ หลายชั้นพร้อมตัวอย่างแบบโต้ตอบ

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

?

ยังไม่มีความคิดเห็น มาเป็นคนแรกกันเลย!

Glassmorphism CSS คืออะไร?

ปรับความทึบ ความเบลอ ความอิ่มตัว และเส้นขอบเพื่อดูตัวอย่างการ์ดกระจกฝ้าแบบเรียลไทม์ แล้วคัดลอก CSS รวมถึง backdrop-filter

วิธีใช้

  1. แผงซ้ายมี 7 ตัวควบคุม: ความทึบ เบลอ ความอิ่มตัว ความทึบของขอบ รัศมีขอบ เงา และตัวเลือกสี — ทั้งหมดอัปเดตการ์ดตัวอย่างทันที
  2. ผลลัพธ์ดีที่สุด: ความทึบ 10–25% และเบลอ 5–15px สองพารามิเตอร์นี้มีผลต่อลุคกระจกฝ้ามากที่สุด
  3. เพิ่มความอิ่มตัวเป็น 180% เพื่อสีสดใสหลังกระจก ความทึบของขอบเพิ่มขอบไฮไลต์อ่อน ๆ ให้การ์ด
  4. คลิกตัวอย่างพื้นหลัง 6 แบบ (ม่วง มหาสมุทร พระอาทิตย์ตก ฯลฯ) เพื่อทดสอบเอฟเฟกต์กระจกบนกราเดียนต์ต่าง ๆ
  5. คลิก “คัดลอก CSS” เพื่อรับโค้ดพร้อมใช้งานจริงที่มีทั้ง backdrop-filter และ -webkit-backdrop-filter (เข้ากันได้กับ Safari)

คำถามที่พบบ่อย

เอฟเฟกต์ glassmorphism ทำได้อย่างไร?

ใช้ backdrop-filter: blur() เพื่อเบลอพื้นหลัง background-color กึ่งโปร่งใส และขอบบาง ๆ

รองรับในทุกเบราว์เซอร์ไหม?

รองรับดีใน Chrome, Edge และ Safari ส่วน Firefox ต้องเปิดแฟลกทดลอง ใส่คำนำหน้า -webkit- เพื่อความปลอดภัย

ดูตัวอย่างแบบเรียลไทม์ได้ไหม?

ได้ การปรับแถบเลื่อนหรือสีใด ๆ จะอัปเดตตัวอย่างทันที

การตั้งค่าเอฟเฟกต์

#FFFFFF
ความทึบของพื้นหลัง15%
เบลอฉากหลัง10px
ความอิ่มตัว180%
ความทึบของขอบ30%
รัศมีมุมโค้ง16px
ความทึบของเงา10%
พื้นหลังตัวอย่าง
ตัวอย่างสด
CSS
background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);

💡 เคล็ดลับ

  • ผลลัพธ์ดีที่สุด: ความทึบ 10–25% เบลอ 5–15px
  • รวมคำนำหน้า -webkit-backdrop-filter เพื่อให้เข้ากับ Safari
  • หากเอฟเฟกต์ดูจืด ให้แน่ใจว่าองค์ประกอบแม่มีพื้นหลังที่มีสีสัน
  • ความอิ่มตัว 180% ช่วยให้สีหลังกระจกสดใส
เปิด →