CSS Filter Builder (Visual)

CSS Filter là gì?

CSS filter property áp dụng hiệu ứng đồ hoạ cho element — như filter trên Photoshop nhưng thuần CSS. Render trên GPU nên rất nhanh, phù hợp animate trên hover/scroll.

9 hàm filter chính

• blur(px): làm mờ. Dùng cho frosted glass effect.
• brightness(%): 0 = đen, 100 = nguyên gốc, 200 = sáng gấp đôi.
• contrast(%): 0 = xám, 100 = nguyên gốc, 200 = đậm.
• saturate(%): 0 = đen trắng, 100 = nguyên gốc, 200 = vivid.
• grayscale(%): 0-100. 100 = đen trắng hoàn toàn.
• sepia(%): tone vàng nâu cổ.
• hue-rotate(deg): xoay vòng màu. 180deg = đảo màu.
• invert(%): đảo ngược. 100 = negative.
• drop-shadow(...): bóng đổ THEO HÌNH (khác box-shadow theo bounding box).

Combine filters

Filter có thể stack nhiều hàm trên 1 element:

filter: blur(2px) brightness(110%) saturate(150%);

Thứ tự QUAN TRỌNG — blur trước brightness sẽ khác blur sau brightness.

Tip

• Hover effect: transition: filter 0.3s để effect smooth khi hover.
• backdrop-filter: filter PHÍA SAU element (frosted glass effect cho modal, sidebar). Cú pháp giống nhau.
• SVG drop-shadow vs box-shadow: drop-shadow follow shape thật (vd: ngôi sao chỉ đổ bóng phần ngôi sao). box-shadow đổ theo hình chữ nhật bao.
• Performance: GPU render, rất rẻ. Nhưng blur với value lớn (> 50px) có thể chậm.