Go Toolstack

ตัวสร้าง Glassmorphism CSS

สร้างเอฟเฟกต์กระจกฝ้าโปร่งแสงยอดนิยมด้วย CSS backdrop-filter และการปรับค่าความเบลอ

ตัวสร้าง Glassmorphism CSS

สร้างเอฟเฟกต์กระจกฝ้าโปร่งแสงยอดนิยมด้วย CSS backdrop-filter และการปรับค่าความเบลอ

วิธีการทำงาน

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.

Discover more client side utilities in this category

ศูนย์รูปภาพ & การออกแบบ • เวิร์กโฟลว์และคู่มือเปรียบเทียบ

สำรวจเครื่องมือรูปภาพ & การออกแบบทั้งหมด ขีดจำกัดของเบราว์เซอร์ และคู่มือการเลือกเครื่องมือ

สำรวจศูนย์ →
จัดรูปแบบ ตรวจสอบ และทำความสะอาด JSON

จัดรูปแบบ บีบอัด และตรวจสอบข้อมูล JSON ด้วยความแม่นยำ 64-bit และกฎ JSON Schema (Draft-07 / 2020-12)
เข้ารหัสและถอดรหัส Base64

แปลงข้อความและข้อมูลระหว่างข้อความธรรมดากับ Base64 รองรับ UTF-8 ภาษาไทย และรูปแบบ URL-Safe
จัดรูปแบบ SQL

จัดรูปแบบแบบสอบถาม SQL ปรับเยื้องและจัดระเบียบคำสั่ง รองรับหลายไดอะเลกต์

คู่มือบล็อกที่เกี่ยวข้อง

คู่มือทางเทคนิค การแก้ไขปัญหา และขั้นตอนการปฏิบัติที่ดีที่สุด

รูปภาพ & การออกแบบ • ~4 นาทีในการอ่าน

เปรียบเทียบการบีบอัดรูปภาพ WebP, AVIF, JPEG และ PNG: คุณภาพ ขนาดไฟล์ และการประมวลผลจริง | GoToolstack

วิเคราะห์เชิงเปรียบเทียบรูปแบบการบีบอัดรูปภาพ WebP, AVIF, JPEG และ PNG ทำความเข้าใจความแตกต่างระหว่าง Lossy และ Lossless การประมวลผลด้วย HTML5 Canvas และ WebAssembly ในเบราว์เซอร์

อ่านคู่มือ →
รูปภาพ & การออกแบบ • ~4 นาทีในการอ่าน

วิธีตรวจดูและลบข้อมูล EXIF ในภาพถ่าย: ปกป้องตำแหน่ง GPS และข้อมูลส่วนบุคคลก่อนแชร์ออนไลน์ | GoToolstack

วิธีตรวจสอบและลบข้อมูลเมทาดาตา EXIF ที่ฝังอยู่ในรูปภาพ รวมถึงพิกัดดาวเทียม GPS รุ่นกล้อง และวันเวลาถ่ายภาพ ด้วยการเรนเดอร์ใหม่บน Canvas ในเบราว์เซอร์เพื่อความปลอดภัย

อ่านคู่มือ →
ศูนย์ความรู้และแนวคิด

เครื่องมือออกแบบ CSS Glassmorphism สร้างเอฟเฟกต์กระจกฝ้า การ์ดโปร่งแสง และฉากหลังเบลอ

Glassmorphism เป็นสไตล์การออกแบบ UI สมัยใหม่ที่จำลองความลึกของระนาบด้วยเอฟเฟกต์กระจกฝ้าโปร่งแสง (Frosted Glass) มองเห็นความเบลอขององค์ประกอบด้านหลัง นิยมใช้ในการ์ดแดชบอร์ด เมนูนำทาง และหน้าต่างป๊อปอัป

เครื่องมือนี้ช่วยให้คุณปรับแต่งค่า backdrop-filter: blur(), ระดับความโปร่งใสของสีพื้นหลัง, ความหนาและความสว่างของเส้นขอบ, และระดับเงาได้อย่างละเอียด พร้อมแสดงผลพรีวิวแบบเรียลไทม์ และคัดลอกโค้ด CSS พร้อม Vendor Prefix ไปใช้งานได้ทันที

สูตรและหลักการทางเทคนิค

Glassmorphism = backdrop-filter: blur(Npx) + -webkit-backdrop-filter: blur(Npx) + background: rgba(R, G, B, α) + border: 1px solid rgba(255, 255, 255, β)

ผสานคุณสมบัติ CSS backdrop-filter สำหรับการเบลอฉากหลัง เข้ากับสีพื้นหลังโปร่งแสงและเส้นขอบสีขาวสะท้อนแสงบางๆ เพื่อจำลองการหักเหของแสงบนกระจกฝ้า

ข้อแนะนำและวิธีปฏิบัติที่ถูกต้อง

  • อย่าลืมใส่ -webkit-backdrop-filter เพื่อรองรับ Safari: เบราว์เซอร์ตระกูล WebKit (เช่น Safari บน macOS และ iOS) ต้องใช้พรีฟิกซ์ -webkit- เพื่อให้เอฟเฟกต์เบลอทำงานได้สมบูรณ์
  • เลือกพื้นหลังที่มีสีสันหรือลวดลายเพื่อขับเน้นเอฟเฟกต์: ความสวยงามของกระจกฝ้าจะมองเห็นได้ชัดเจนเมื่ออยู่บนพื้นหลังที่มีการไล่ระดับสี (Gradient) หรือภาพที่มีความเปรียบต่างสูง
  • ใช้เส้นขอบโปร่งแสงบางๆ (1px Semi-transparent Border): เส้นขอบสีขาวโปร่งแสงบางๆ ที่ขอบบนหรือรอบด้านช่วยจำลองการสะท้อนของแสงที่ขอบกระจก ทำให้วัตถุดูมีตัวตนชัดเจนขึ้น
  • คำนึงถึงความคมชัดในการอ่านตัวอักษร (Contrast): ตรวจสอบว่าสีตัวอักษรบนการ์ดกระจกฝ้ามีความเปรียบต่างเพียงพอตามมาตรฐาน WCAG เพื่อไม่ให้ผู้ใช้อ่านข้อมูลยาก

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

เหตุใดเอฟเฟกต์ backdrop-filter จึงไม่แสดงผลในเบราว์เซอร์บางตัว?
ส่วนใหญ่มักเกิดจากการลืมใส่คำสั่ง -webkit-backdrop-filter: blur(...) สำหรับเบราว์เซอร์ Safari หรือเกิดจากผู้ใช้ปิดการตั้งค่าการเร่งความเร็วด้วยฮาร์ดแวร์ในเบราว์เซอร์
จะทำอย่างไรหากเบราว์เซอร์ของผู้ใช้รุ่นเก่าไม่รองรับ backdrop-filter?
สามารถใส่คำสั่ง fallback เช่น การกำหนดสีพื้นหลัง rgba แบบทึบขึ้นเล็กน้อยในบรรทัดก่อนหน้า หรือใช้ @supports (backdrop-filter: blur(10px)) เพื่อแยกสไตล์สำหรับเบราว์เซอร์ที่รองรับ
ความแตกต่างระหว่าง filter: blur() และ backdrop-filter: blur() คืออะไร?
filter: blur() จะเบลอตัวองค์ประกอบและเนื้อหาภายในทั้งหมด ส่วน backdrop-filter: blur() จะเบลอเฉพาะพื้นที่ของฉากหลังที่อยู่ใต้ตัวองค์ประกอบนั้น โดยเนื้อหาบนองค์ประกอบยังคงคมชัด
เครื่องมือนี้สร้างโค้ดสำหรับ HTML ใดบ้าง?
สามารถนำคลาส CSS ที่ได้ไปใช้กับแท็ก HTML ใดๆ ก็ได้ เช่น
, <nav>, <section> หรือ <article>