เครื่องมือสร้าง Glassmorphism

backdrop-filter: blur() คือพร็อพเพอร์ตี้ CSS ที่อยู่เบื้องหลังลุคกระจกฝ้า — พาเนลโปร่งแสงที่เบลอทุกอย่างที่เคลื่อนไหวอยู่ข้างหลัง แทนที่จะเฟดสีพื้นเรียบๆ ปัญหาคือคุณภาพของภาพเบลอนั้นแทบประเมินไม่ได้บนภาพนิ่ง มันจะดูสมจริงก็ต่อเมื่อมีบางอย่างเคลื่อนไหวอยู่ข้างใต้จริงๆ แบบที่จะเกิดบนหน้าเว็บที่มีคอนเทนต์, วิดีโอ, หรือ hero แบบเคลื่อนไหว เครื่องมือนี้วางการ์ดตัวอย่างบนพื้นหลังที่เคลื่อนไหวจริง ไม่ใช่ภาพนิ่ง คุณจึงเห็นสิ่งที่ผู้เข้าชมจะได้เห็นจริงขณะลากสไลเดอร์

พื้นหลังเป็นแอนิเมชัน CSS แท้: ใช้ linear-gradient ขนาด 400% ขององค์ประกอบ พร้อม @keyframes เลื่อน background-position กลับไปกลับมาแบบวนซ้ำ — ไม่มีลูปแอนิเมชันจาก JavaScript, ไม่มี canvas, ใช้เทคนิค background-position แบบต่อเนื่องเหมือนที่ใช้ใน hero section จริง สีและความทึบของสีโปร่งแสง, สี/ความทึบ/ความกว้างของเส้นขอบไฮไลต์, รัศมีมุม และความนุ่มนวลของเงาล้วนขับเคลื่อนสไตล์สดของการ์ด และช่อง CSS ที่คัดลอกได้จะสะท้อนค่าเดียวกันทุกประการ

ไม่ใช่ทุกเบราว์เซอร์ที่รองรับ backdrop-filter เครื่องมือนี้จึงสร้างบล็อก @supports not (backdrop-filter: blur(1px)) แท้ด้วย — ไม่ใช่แค่พอเป็นพิธี แต่เป็นกฎ fallback ที่มีสีพื้นหลังของตัวเอง คำนวณจากความทึบของสีโปร่งแสงจริงของคุณ เพราะความโปร่งแสงที่ไม่มีภาพเบลอนั้นดูแย่ลงอย่างเห็นได้ชัด (สิ่งที่อยู่ข้างหลังจะทะลุออกมาโดยไม่เบลอ) fallback จึงเพิ่มค่าแอลฟาแชนเนลให้สูงกว่าความทึบสีโปร่งแสงที่คุณตั้งโดยอัตโนมัติ และคอมเมนต์ใน CSS ที่สร้างจะอธิบายเหตุผลและปริมาณที่เพิ่ม

ทุกอย่างคำนวณและแสดงผลในเบราว์เซอร์ของคุณ: ไม่มีการอัปโหลด, ไม่มีบัญชี, ไม่มีการส่งข้อมูลไปกลับเซิร์ฟเวอร์ คัดลอก CSS เมื่อการ์ดดูดีแล้ว วางบนองค์ประกอบใดๆ ที่คุณต้องการให้อยู่เหนือรูปภาพ, วิดีโอ, หรือพื้นหลังไล่สี และเก็บบล็อก @supports ไว้ เพื่อให้เบราว์เซอร์รุ่นเก่ายังได้รับการ์ดที่อ่านได้และทึบขึ้น แทนที่จะแทบมองไม่เห็น