เครื่องมือสร้าง CSS Filter
เครื่องมือสร้าง CSS filter ระดับมืออาชีพ พร้อมฟิลเตอร์ 9+ ประเภทและเอฟเฟกต์พรีเซ็ต 8 รายการ สร้างเอฟเฟกต์ blur, brightness, contrast, grayscale
Loading tool...
เครื่องมือสร้าง CSS Filter คืออะไร?
CSS filter generator ช่วยใส่ effects เช่น blur, brightness, contrast และ grayscale ให้รูปภาพ สร้างโค้ด CSS filter ที่เกี่ยวข้องทันที
ประโยชน์หลัก
- ปรับแต่ง visual
- ดูตัวอย่าง real-time
- สร้างโค้ด
- หลาย effects
กรณีการใช้งาน
- •แก้ไขรูปภาพ
- •ออกแบบ UI
- •effects รูปถ่าย
- •layouts สร้างสรรค์
วิธีสร้าง CSS Filters
- อัปโหลดรูปภาพ: เลือกรูปภาพเพื่อทดสอบ
- ปรับ filters: ตั้งค่า blur, brightness, contrast
- ดูตัวอย่าง: ดูการเปลี่ยนแปลงแบบ real-time
- คัดลอก CSS: คัดลอก filter property
คุณสมบัติหลัก
- ตัวแก้ไข CSS filter แบบภาพ
- blur, brightness, contrast, grayscale ฯลฯ
- รวม filter หลายตัวได้
- ดูตัวอย่างสดบนรูปตัวอย่าง
- พรีเซ็ต filter combinations
- คัดลอก CSS filter property
คำถามที่พบบ่อย
มี CSS filters อะไรบ้าง?
Filters: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow
รวมหลาย filters ได้ไหม?
ได้ เชื่อม filters ใน declaration เดียว: filter: blur(5px) brightness(1.2) contrast(1.1)
filters ส่งผลต่อ performance อย่างไร?
Filters อาจกระทบ performance บน elements ขนาดใหญ่ ใช้ will-change และทดสอบบนอุปกรณ์ช้ากว่า
animate CSS filters ได้ไหม?
ได้ filters animatable ใช้ transition หรือ keyframes สำหรับ filter effects ที่ลื่น
;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgb(147,51,234);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='300' fill='url(%23grad)' /%3E%3Ccircle cx='100' cy='100' r='50' fill='%23fbbf24' /%3E%3Ccircle cx='300' cy='100' r='50' fill='%2310b981' /%3E%3Crect x='75' y='180' width='250' height='80' rx='10' fill='%23ef4444' /%3E%3C/svg%3E)