Công cụ tạo CSS Filter

Tạo CSS Filter là gì?

Áp dụng thuộc tính CSS filter lên ảnh theo thời gian thực. Kết hợp làm mờ, độ sáng, độ tương phản, thang xám, xoay sắc độ, đảo màu, độ trong suốt, độ bão hòa, sepia và drop-shadow, so sánh kết quả với ảnh gốc và sao chép mã. Bạn có thể dùng ảnh mẫu có sẵn hoặc tải ảnh của mình lên, ảnh vẫn nằm trên thiết bị của bạn.

Cách sử dụng Tạo CSS Filter

1. Chọn một mẫu có sẵn (Đen trắng, Hoài cổ, Ấm, Lạnh, Kịch tính…) hoặc bắt đầu từ Không.
2. Kéo thanh trượt của từng hàm filter.
3. Bật drop-shadow() và đặt độ lệch, độ mờ, màu và độ trong suốt nếu cần.
4. Bấm Dùng ảnh của bạn để thử với một file trên máy.
5. Sao chép mã CSS.

Ví dụ

blur 2px, brightness 120%, hue-rotate -90°, sepia 50%, bật drop-shadow (4px 4px 6px, đen ở 0.5)

filter: blur(2px) brightness(120%) hue-rotate(-90deg) sepia(50%) drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));

Khi nào nên dùng Tạo CSS Filter

Dùng cho hiệu ứng hover trên ảnh, phong cách ảnh đồng nhất, làm tối nền và bóng bám theo hình PNG/SVG trong suốt (drop-shadow). Nó không sửa chính file ảnh; để chỉnh sửa vĩnh viễn, hãy dùng trình chỉnh sửa ảnh hoặc các công cụ ảnh của trang. Để tác động lên những gì phía sau phần tử thay vì chính phần tử, hãy dùng backdrop-filter (xem công cụ tạo Glassmorphism).

Tạo CSS Filter hoạt động như thế nào

Chỉ những hàm khác giá trị trung tính mới được viết (ví dụ brightness bị bỏ khi ở 100%), theo thứ tự cố định: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow. Thứ tự quan trọng trong CSS vì mỗi hàm được áp dụng lên kết quả của hàm trước. Khi không có gì thay đổi, kết quả là filter: none;. Ảnh của bạn được hiển thị qua object URL cục bộ và không bao giờ được tải lên.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Hiệu ứng hover từ thang xám sang có màu cho logo
• ✓ Phong cách ảnh hoài cổ hoặc tông ấm trong thư viện ảnh
• ✓ Làm tối ảnh banner dưới chữ
• ✓ Bóng quanh icon PNG trong suốt bằng drop-shadow()
• ✓ Xem nhanh mô phỏng mù màu bằng hue-rotate

Câu Hỏi Thường Gặp

Khám phá thêm danh mục