CSS Filter Generator
Apply CSS filters with live preview.
ตัวอย่าง
.element {
filter: none;
}เกี่ยวกับเครื่องมือนี้
เครื่องมือสร้าง CSS Filter ช่วยให้คุณปรับฟังก์ชันฟิลเตอร์ CSS 9 รายการ — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate และ sepia — ได้อย่างเห็นภาพ และดูผลรวมแบบเรียลไทม์
CSS filter ใช้เอฟเฟกต์ภาพกับองค์ประกอบ HTML คล้ายกับซอฟต์แวร์แต่งภาพ ใช้การเร่งความเร็ว GPU และทำงานกับรูปภาพ พื้นหลัง ข้อความ
วิธีใช้งาน
- ลากแถบเลื่อนใดก็ได้เพื่อใช้เอฟเฟกต์ฟิลเตอร์นั้น
- รวมหลายฟิลเตอร์ — ตัวอย่างอัปเดตสด
- ฟิลเตอร์ที่มีค่าเริ่มต้นจะถูกยกเว้นจากผลลัพธ์โดยอัตโนมัติ
- คลิก รีเซ็ตทั้งหมด เพื่อกลับสู่ค่าเริ่มต้น
- คลิก คัดลอก เพื่อคัดลอกคุณสมบัติ CSS filter
กรณีการใช้งาน
นักออกแบบใช้ grayscale และ sepia สำหรับส่วน UI โทนเดียว นักพัฒนาใช้ blur สำหรับพื้นหลังกระจกฝ้า brightness ใช้บ่อยในเอฟเฟกต์ hover การใช้งานโหมดมืดใช้ฟิลเตอร์ invert
คำถามที่พบบ่อย
- ความแตกต่างระหว่าง filter และ backdrop-filter คืออะไร? — filter ใช้กับองค์ประกอบและลูกทั้งหมด backdrop-filter ใช้กับพื้นที่ด้านหลังองค์ประกอบเท่านั้น
- สามารถรวมหลายฟิลเตอร์ได้ไหม? — ได้ แสดงรายการคั่นด้วยช่องว่างในคุณสมบัติ filter เครื่องมือนี้ทำโดยอัตโนมัติ
- CSS filter มีผลต่อประสิทธิภาพไหม? — ฟิลเตอร์ง่ายๆ เช่น grayscale และ brightness มีต้นทุนต่ำ blur มีราคาแพงกว่า โดยเฉพาะในพื้นที่ขนาดใหญ่