ตัวสร้าง CSS backdrop-filter
สร้าง CSS backdrop-filter พร้อมควบคุม blur, brightness, contrast, hue-rotate และ saturate พร้อม preview กระจกฝ้าแบบสดและ CSS พร้อมคัดลอก ฟรีในเบราว์เซอร์
Loading tool...
ตัวสร้าง CSS backdrop-filter คืออะไร?
ตัวสร้าง CSS backdrop-filter ช่วยสร้าง CSS property backdrop-filter แบบโต้ตอบได้ ต่างจาก filter ปกติตรงที่ backdrop-filter เบลอ ปรับความสว่าง เปลี่ยนสี หรือดัดแปลงเนื้อหาที่อยู่ด้านหลังอิลิเมนต์ ทำให้เกิดลุคกระจกฝ้าที่นิยมในการออกแบบ UI สมัยใหม่ ปรับแต่ละ filter function และสไตล์พื้นผิวพร้อม preview สด แล้วคัดลอก CSS พร้อมใช้งาน
ประโยชน์หลัก
- preview กระจกฝ้าแบบสดบน gradient จริง
- รองรับ backdrop-filter ทั้งเก้าฟังก์ชัน
- พรีเซ็ตคัดสรรหกแบบใช้ได้ทันที
- ผลลัพธ์รวม -webkit- prefix สำหรับ Safari
- ทำงานออฟไลน์ ไม่ต้องมีเซิร์ฟเวอร์หรืออัปโหลด
กรณีการใช้งาน
- •การ์ดและ modals สไตล์ glassmorphism
- •แถบนำทางสไตล์ iOS
- •overlay บน hero section
- •แผง sidebar กระจกฝ้า
วิธีใช้ตัวสร้าง CSS backdrop-filter
- เลือกพรีเซ็ต: เริ่มจาก frosted, tinted, dark, warm, mono หรือ vibrant หรือปรับเองได้เลย
- ปรับ filter chain: ปรับ slider ของ blur, brightness, contrast, saturate, hue-rotate และ filter อื่น ๆ ตามต้องการ
- ตกแต่งพื้นผิว: ตั้งสีพื้นหลัง ความโปร่งใส สีเส้นขอบ ความหนา และ border radius
- คัดลอก CSS: คลิก Copy เพื่อคัดลอก rule .glass พร้อม -webkit-backdrop-filter prefix แล้วนำไปวางในโปรเจกต์
คุณสมบัติหลัก
- backdrop-filter ครบทุกฟังก์ชัน: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate และ sepia
- preview กระจกฝ้าแบบสดบนพื้นหลัง gradient หลากสี
- พรีเซ็ตพร้อมใช้หกแบบ: frosted, tinted, dark, warm sepia, mono gray และ vibrant hue
- ปรับสีพื้นหลัง ความโปร่งใส สีเส้นขอบ ความหนา และ border radius ได้
- คัดลอก CSS พร้อมใช้คลิกเดียว พร้อม -webkit-backdrop-filter prefix สำหรับ Safari
- ทำงานในเบราว์เซอร์ 100% — ไม่ต้องอัปโหลด ไม่ต้องมีเซิร์ฟเวอร์ ใช้งานออฟไลน์ได้