CSS Filter Generator

Tạo hiệu ứng filter CSS cho hình ảnh và elements

Filters

Brightness: 100%

Contrast: 100%

Saturate: 100%

Grayscale: 0%

Sepia: 0%

Hue Rotate: 0°

Blur: 0px

Invert: 0%

Presets

Preview

Original

Filtered

CSS Code

filter: none;

CSS Filter Generator - Tạo Hiệu Ứng Filter Ảnh Online Miễn Phí

Công cụ tạo CSS filter effects trực quan. 8 loại filter: brightness, contrast, saturate, grayscale, sepia, hue-rotate, blur, invert. 6 preset effects: Grayscale, Sepia, Vintage, High Contrast, Warm, Cool. Preview so sánh original/filtered realtime. Copy CSS code sẵn sàng dùng.

Tính năng nổi bật

8 loại CSS filter có thể kết hợp

Brightness - điều chỉnh độ sáng

Contrast - điều chỉnh độ tương phản

Saturate - điều chỉnh độ bão hòa màu

Grayscale - chuyển sang đen trắng

Sepia - hiệu ứng ảnh cũ

Hue-rotate - xoay màu sắc

Blur - làm mờ

Invert - đảo ngược màu

6 preset effects có sẵn

Preview so sánh original vs filtered

Reset về mặc định một click

CSS Filter dùng để làm gì?

CSS filter cho phép áp dụng hiệu ứng đồ họa như blur, grayscale, sepia lên hình ảnh và bất kỳ HTML element nào. Sử dụng phổ biến cho: hover effects trên images, tạo disabled/inactive state, image styling không cần Photoshop, tạo mood/theme cho thiết kế, và làm mờ background. Filter được xử lý bởi GPU nên performance tốt.

Cách tạo CSS filter

1Điều chỉnh các slider filter theo ý muốn
2Hoặc click preset để áp dụng effect có sẵn
3Xem preview so sánh original và filtered
4Kết hợp nhiều filter để tạo effect độc đáo
5Click Reset để quay về mặc định
6Copy CSS code và paste vào project

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

Có thể kết hợp nhiều filter không?

Có. CSS filter cho phép kết hợp nhiều filter trong một property, cách nhau bằng space. VD: filter: grayscale(50%) brightness(120%) contrast(110%);

Filter có ảnh hưởng performance không?

CSS filters được xử lý bởi GPU nên khá nhanh. Tuy nhiên, blur với radius lớn trên elements lớn có thể gây lag. Tránh animate filter property vì có thể gây jank.

Filter hoạt động trên tất cả browsers?

CSS filter được hỗ trợ trên tất cả browsers hiện đại (Chrome, Firefox, Safari, Edge). IE không hỗ trợ. Không cần prefix cho browsers mới.

Làm sao tạo hover effect với filter?

Dùng CSS: img { filter: grayscale(100%); transition: filter 0.3s; } img:hover { filter: grayscale(0%); }. Transition giúp chuyển đổi mượt mà.

Filter khác gì với blend-mode?

Filter áp dụng effects lên element đơn lẻ. Blend-mode (mix-blend-mode, background-blend-mode) xác định cách element blend với background hoặc elements phía sau.

Từ khóa liên quan

css filter generatorimage filter csscss effects generatorgrayscale cssblur csssepia filtercss image effects

Hợp tác ngay với Tấn Phát Digital

Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.