🪞

CSS Filter Builder (Visual)

Visual builder cho CSS filter — blur, brightness, contrast, sepia, hue-rotate, drop-shadow. 8 preset Vintage / Polaroid / Noir / Instagram-style.

Tất cả công cụ

Mẫu sẵn

Blur (px): 0 Brightness (%): 100 Contrast (%): 100 Saturate (%): 100 Grayscale (%): 0 Sepia (%): 0 Invert (%): 0 Hue rotate (deg): 0 Opacity (%): 100

Drop shadow

X Y Blur Màu

Xem trước

CSS

CSS Filter — áp dụng hiệu ứng cho ảnh hoặc element. Render trên GPU, performance tốt. Phù hợp gallery effect, Instagram-style, hover transition.

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.