เครื่องสร้าง CSS Filter

ฟังก์ชัน filter

ลำดับการต่อมีผล

filter: brightness(0.5) saturate(2) ใช้ความสว่างก่อน แล้วจึงความอิ่มสี filter ทั้งสองทบกัน

filter: saturate(2) brightness(0.5) ใช้ความอิ่มสีก่อน เพราะภาพสว่างกว่าก่อนถูกทำให้มืดลง ความอิ่มสีจึงเด่นชัดกว่า

ความต่างทางภาพละเอียดอ่อนแต่มีจริง ลองทั้งสองลำดับเมื่อชุด filter ไม่เป็นอย่างที่คุณคาด

สูตรที่พบบ่อย

/* ลุคภาพซีดจาง */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* วินเทจ / ซีดจาง */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* การประมาณ duotone */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* ทำ hero ให้มืดลง */
filter: brightness(0.6);

/* สถานะปิดใช้งาน */
filter: grayscale(1) opacity(0.6);

/* โอเวอร์เลย์กระจกฝ้า */
filter: blur(12px) saturate(1.3);

backdrop-filter สำหรับกระจกฝ้า

filter ใช้กับองค์ประกอบนั้นเอง backdrop-filter ใช้กับ สิ่งที่อยู่ด้านหลัง องค์ประกอบกึ่งโปร่งใส คือเอฟเฟกต์กระจกฝ้าที่ iOS ทำให้เป็นที่นิยม

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

การรองรับ: เบราว์เซอร์สมัยใหม่ทั้งหมด Firefox รองรับโดยไม่ต้องใช้ flag ตั้งแต่ 103+

หมายเหตุด้านประสิทธิภาพ

• blur() เป็น filter ที่แพงที่สุดเพราะต้องคอนโวลฟ์ทุกพิกเซลด้วยเคอร์เนล การเบลอ 30px บนภาพ hero 4K เสียเฟรมจริง
• grayscale, sepia, brightness และที่คล้ายกันเป็นการแปลงสีต่อพิกเซล ราคาถูก
• filter ถูกเร่งด้วย GPU ในเบราว์เซอร์สมัยใหม่ แต่การแอนิเมต blur() ยังกระตุกบนอุปกรณ์ระดับล่าง
• ควรใช้ will-change: filter ก่อนแอนิเมต

filter: drop-shadow() เทียบ box-shadow

• box-shadow ตามกล่องขอบขององค์ประกอบ (เคารพ border-radius)
• filter: drop-shadow() ตามพิกเซลที่ไม่โปร่งใสขององค์ประกอบ หมายความว่ามันลากตามรูป clip-path ความโปร่งใส PNG และเส้นทาง SVG

สำหรับเงาบนภาพที่ถูกตัดหรือโปร่งใส ให้ใช้ drop-shadow สำหรับการ์ดและกล่องมาตรฐาน box-shadow เร็วกว่า