Skip to content

Màu sắc & Thiết kế

Trình tạo bộ lọc CSS

Live preview blur, brightness, hue-rotate and more.

Runs in your browser
Preview
CSS
.filtered {
  filter: none;
}

Ghi chú của biên tập viên

Understanding · Eight functions, one GPU-shader.

Chương phân tích chuyên sâu này hiện chỉ có sẵn bằng tiếng Anh. Công cụ chuyển đổi ở trên hoạt động bằng ngôn ngữ của bạn; bài viết giải thích dài chưa được dịch.

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

Quick answers.

›Which filters can I generate here?

You can adjust `blur`, `brightness`, `contrast`, `grayscale`, `hue-rotate`, `invert`, `opacity`, `saturate`, and `sepia` settings.

›Are CSS filters performant?

Most filters are hardware-accelerated by the browser. However, large `blur` values or applying many filters to large images can impact scroll performance on lower-end devices.

›What browser support should I expect?

Modern browsers have excellent support for CSS filters. For older environments like Internet Explorer, these effects will gracefully degrade and simply not show.

›Can I apply multiple filters at once?

Yes. The tool combines all active values into a single `filter` property string, which is the standard way to chain multiple effects in CSS.

Mọi người cũng tìm kiếm

Công cụ liên quan

More in this room.

Xem tất cả trong Màu sắc & Thiết kế