เครื่องสร้าง CSS Filter
เครื่องมือภาพสำหรับสร้างและดูตัวอย่างคุณสมบัติ CSS filter
การตั้งค่าฟิลเตอร์
ปรับคุณสมบัติฟิลเตอร์แต่ละรายการ
ค่าที่ตั้งไว้ล่วงหน้า
ลองใช้สไตล์ฟิลเตอร์ที่กำหนดไว้ล่วงหน้า
ดูตัวอย่าง
ดูเอฟเฟกต์ฟิลเตอร์ที่สร้างขึ้นบนรูปภาพเริ่มต้น
ต้นฉบับ
ผ่านการกรอง
Filter Preview
CSS ที่สร้างขึ้น
filter: none;คำอธิบายฟังก์ชัน CSS Filter
เอฟเฟกต์ภาพ
- • blur(px): เอฟเฟกต์เบลอ
- • brightness(%): การปรับความสว่าง
- • contrast(%): การปรับความคมชัด
- • opacity(%): การปรับความทึบ
เอฟเฟกต์สี
- • grayscale(%): เอฟเฟกต์ระดับสีเทา
- • hue-rotate(deg): การหมุนเฉดสี
- • invert(%): การกลับสี
- • saturate(%): การปรับความอิ่มตัว
- • sepia(%): เอฟเฟกต์ซีเปีย
เคล็ดลับการใช้งาน
- • รวมฟิลเตอร์หลายตัวโดยคั่นด้วยช่องว่าง
- • ใช้กับองค์ประกอบ HTML ใดก็ได้ ไม่ใช่แค่รูปภาพ
- • ใช้ร่วมกับแอนิเมชัน CSS เพื่อสร้างเอฟเฟกต์ไดนามิก
- • ใช้ backdrop-filter เพื่อใช้กับพื้นหลังเท่านั้น