CSS Filter Builder (Visual)
Visual builder cho CSS filter — blur, brightness, contrast, sepia, hue-rotate, drop-shadow. 8 preset Vintage / Polaroid / Noir / Instagram-style.
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
blurvới value lớn (> 50px) có thể chậm.
Liên quan
Công cụ liên quan
Xem tất cả công cụ →JWT Decoder
Decode JWT token, xem header/payload/claims với thời gian dễ đọc.
MỚIFormat JSON
Format / minify / validate JSON. Sort key A-Z, custom indent, phím tắt Ctrl+Enter.
MỚIRegex Tester
Test regex realtime với highlight match. 7 mẫu sẵn cho VN (email, SĐT, CCCD, IP...).
MỚIUUID / Hash / Base64 / URL
Bundle 4 dev tool: UUID v4, SHA-256/512 hash, Base64 (URL-safe), URL encode.