%22%2F%3E%3Ccircle%20cx%3D%22350%22%20cy%3D%22120%22%20r%3D%2244%22%20fill%3D%22%23fff4c9%22%2F%3E%3Cpath%20d%3D%22M0%20230%20L90%20150%20L170%20220%20L260%20130%20L360%20230%20L480%20160%20V300%20H0Z%22%20fill%3D%22%233d6b4f%22%2F%3E%3Cpath%20d%3D%22M0%20260%20L120%20200%20L230%20260%20L340%20210%20L480%20270%20V300%20H0Z%22%20fill%3D%22%23244a37%22%2F%3E%3C%2Fsvg%3E)
Cách dùng Trình tạo CSS Filter
- Hiệu ứng ảnh: kéo các thanh trượt (hoặc chọn một preset) và xem trước kết quả. Nhấn Dùng ảnh của tôi để thử trên ảnh riêng — ảnh chỉ nằm trên thiết bị của bạn.
- Mã hex sang filter: nhập một màu như
#4f46e5. Công cụ sẽ tìm mộtfilterbiến icon đen thành màu đó. - Sao chép CSS và áp dụng cho một
<img>, SVG hoặc bất kỳ phần tử nào khác.
Các hàm CSS filter
| Hàm | Hiệu ứng | Mặc định |
|---|---|---|
blur(4px) | Làm mờ Gaussian | 0 |
brightness(120%), contrast(110%) | sáng hơn/tối hơn, tương phản tăng/giảm | 100% |
saturate(150%), grayscale(100%) | màu đậm hơn/nhạt hơn | 100%, 0 |
hue-rotate(90deg) | xoay tất cả màu quanh bánh xe màu | 0deg |
sepia(60%), invert(100%) | tông nâu ấm, âm bản | 0 |
drop-shadow(0 8px 12px #0006) | bóng đổ theo độ trong suốt của ảnh | không có |
Các filter được áp dụng theo thứ tự từ trái sang phải, nên grayscale(100%) sepia(60%) cho kết quả khác với thứ tự ngược lại.
Đổi màu icon bằng filter
Bạn không thể đặt color cho <img src="icon.svg">, nhưng có thể dùng filter. Bắt đầu từ màu đen, một chuỗi như invert() sepia() saturate() hue-rotate() brightness() contrast() có thể đạt gần như mọi màu; công cụ này tìm các giá trị có chênh lệch nhìn thấy nhỏ nhất. Nếu bạn kiểm soát file SVG, fill="currentColor" sẽ đơn giản hơn — Công cụ tối ưu SVG có thể làm việc này cho bạn.
Cũng được tìm dưới tên: tạo css filter, chuyển mã hex sang css filter, đổi màu svg bằng css filter, css filter màu, hiệu ứng ảnh css filter, css filter brightness contrast, css grayscale, đổi icon đen sang màu css filter.
Các công cụ dùng kèm tốt với Trình tạo CSS Filter
- Chuyển đổi mã màu — Dán bất kỳ màu CSS nào — HEX, rgb(), hsl(), hwb(), oklch() hoặc tên màu như tomato — và nhận ngay mọi định dạng còn lại, kèm bảng màu 50–950 sẵn sàng dùng.
- Trình tạo Border Radius — Bo tròn các góc của bất kỳ khung nào: kéo một thanh trượt cho tất cả các góc hoặc đặt từng góc riêng, chuyển sang góc elliptical để tạo hình blob và lá, rồi sao chép đoạn CSS border-radius ngắn gọn và hợp lệ nhất.
- Tạo Box Shadow CSS — Xếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ trong suốt trên thẻ xem trước trực tiếp, rồi sao chép CSS box-shadow hoặc text-shadow.
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
Câu hỏi thường gặp
Làm sao đổi màu icon SVG hoặc PNG bằng CSS?
Nếu icon có màu đen, hãy dùng Mã hex sang filter: nhập màu bạn muốn và áp dụng filter được tạo cho thẻ img. Với SVG nội tuyến, đặt fill="currentColor" và dùng thuộc tính color trong CSS.
Vì sao màu của filter không chính xác tuyệt đối?
Filter chỉ có thể xấp xỉ một số màu. Công cụ sẽ hiển thị độ chênh lệch; hãy chạy tìm kiếm lại để có kết quả gần hơn. Kết quả được đánh dấu “Perfect” thì mắt thường không phân biệt được.
CSS filter có hoạt động trên mọi phần tử không?
Có — ảnh, video, SVG, văn bản và cả các khối lớn. Lưu ý rằng filter tạo ra một stacking context mới và có thể ảnh hưởng hiệu năng trên vùng rất lớn.
Khác biệt giữa box-shadow và drop-shadow là gì?
box-shadow bám theo hình chữ nhật của phần tử; filter: drop-shadow bám theo các điểm ảnh hiển thị, nên nó ôm sát hình dạng PNG và SVG trong suốt.
Tôi có thể cài Trình tạo CSS Filter như một ứng dụng web và dùng khi không có mạng không?
Có. Trình tạo CSS Filter là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.