CSS Filter Generator

Giới thiệu công cụ

Công cụ tạo bộ lọc CSS cho phép điều chỉnh trực quan chín hàm bộ lọc CSS — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate và sepia — và xem hiệu ứng kết hợp theo thời gian thực.

Bộ lọc CSS áp dụng hiệu ứng thị giác cho các phần tử HTML tương tự phần mềm chỉnh sửa ảnh. Chúng được tăng tốc GPU và hoạt động trên hình ảnh, nền, văn bản.

Cách sử dụng

1. Kéo bất kỳ thanh trượt nào để áp dụng hiệu ứng bộ lọc đó.
2. Kết hợp nhiều bộ lọc — xem trước cập nhật trực tiếp.
3. Bộ lọc ở giá trị mặc định được tự động loại trừ khỏi kết quả.
4. Nhấp Đặt lại tất cả để trở về giá trị mặc định.
5. Nhấp Sao chép để sao chép thuộc tính CSS filter.

Trường hợp sử dụng

Nhà thiết kế dùng grayscale và sepia cho các phần UI đơn sắc. Nhà phát triển dùng blur cho nền kính mờ. brightness phổ biến trong hiệu ứng hover. Chế độ tối dùng bộ lọc invert.

Câu hỏi thường gặp

• Sự khác biệt giữa filter và backdrop-filter là gì? — filter áp dụng cho phần tử và tất cả con của nó. backdrop-filter chỉ áp dụng cho vùng phía sau phần tử (hữu ích cho lớp phủ kính mờ).
• Có thể kết hợp nhiều bộ lọc không? — Có. Liệt kê chúng cách nhau bằng dấu cách trong thuộc tính filter. Công cụ này tự động làm điều đó.
• Bộ lọc CSS có ảnh hưởng đến hiệu suất không? — Các bộ lọc đơn giản như grayscale và brightness rất nhẹ. Blur tốn kém hơn, đặc biệt trên diện tích lớn — dùng tiết kiệm trên mobile.