Thuộc tính filter trong CSS

• Trần Thị Vân
• 1618
• 19/07/2025

Chức năng của Thuộc tính filter trong CSS

Thuộc tính filter trong CSS dùng để áp dụng các hiệu ứng như làm mờ, thay đổi độ sáng, độ tương phản,.... lên các thẻ HTML, giúp giao diện website trở nên sinh động hơn và ứng dụng được nhiều yêu cầu.

Các giá trị của Thuộc tính filter trong CSS

Css filter grayscale

Chuyển sang thang màu xám, giá trị từ 0% đến 100%.

img{filter:grayscale(100%)}

Chạy Thử

Css filter brightness

Làm sáng hoặc làm tối hình ảnh, thẻ html khác, mốc của hình gốc là 100% hoặc 1.

img{filter: brightness(150%);}

Chạy Thử

Css filter saturate

Giá trị: saturate() nhận một giá trị không âm, có thể là số thập phân hoặc phần trăm, thể hiện mức độ bão hòa.

100% (hoặc 1): Giữ nguyên màu gốc, không thay đổi độ bão hòa.

> 100% (hoặc > 1): Tăng độ bão hòa, làm cho màu sắc trở nên rực rỡ hơn.

img{filter: saturate(200%);}

Chạy Thử

Css filter contrast

Giúp tăng độ tương phản của hình ảnh, tăng giảm đều được và có thể chuyển về màu xám.

img{filter: contrast(150%);}

Chạy Thử

Css filter blur

Làm mờ hình ảnh từ 1px trở lên.

img{filter:blur(5px);}

Chạy Thử

Cách kết hợp nhiều hiệu ứng filter trong CSS

CSS cho phép đặt nhiều hàm filter trên cùng một phần tử để tạo hiệu ứng hình ảnh linh hoạt hơn. Thay vì chỉ dùng một hiệu ứng đơn lẻ, bạn có thể kết hợp độ sáng, độ tương phản, độ bão hòa, độ mờ hoặc các hiệu ứng khác trong cùng một khai báo.

Kết hợp nhiều hàm filter trên cùng một phần tử

Các hàm filter được viết liên tiếp và cách nhau bằng khoảng trắng. Trình duyệt sẽ xử lý chúng theo đúng thứ tự xuất hiện, vì vậy việc thay đổi vị trí các hàm có thể làm kết quả hiển thị khác nhau.

.anh {
  filter: brightness(0.9) contrast(1.2) saturate(1.3);
}

Trong ví dụ trên, hình ảnh được giảm nhẹ độ sáng, tăng độ tương phản rồi tăng độ bão hòa màu. Cách viết này phù hợp khi muốn điều chỉnh hình ảnh trực tiếp bằng CSS mà không cần tạo thêm một phiên bản ảnh khác.

Tạo hiệu ứng hình ảnh bằng nhiều filter

Kết hợp nhiều hàm giúp tạo ra những hiệu ứng phù hợp với từng mục đích thiết kế. Chẳng hạn, có thể làm ảnh tối hơn và tăng tương phản khi đặt chữ lên ảnh, hoặc giảm màu sắc để tạo cảm giác nhẹ nhàng cho hình ảnh nền.

.anh-nen {
  filter: brightness(0.7) contrast(1.15) saturate(0.8);
}

Không nên lạm dụng quá nhiều hiệu ứng trong một khai báo. Khi các giá trị bị đẩy quá xa, hình ảnh dễ mất chi tiết, màu sắc thiếu tự nhiên hoặc hiệu ứng trở nên khó kiểm soát.

Lưu ý khi sử dụng nhiều filter cùng lúc

Khi kết hợp nhiều hiệu ứng, nên thử từng hàm trước rồi mới ghép chúng lại. Cách này giúp xác định chính xác hiệu ứng nào đang tạo ra thay đổi không mong muốn.

• Đặt các hàm theo thứ tự phù hợp với hiệu ứng mong muốn.
• Ưu tiên giá trị vừa phải để hình ảnh vẫn giữ được chi tiết.
• Kiểm tra hiệu ứng trên cả giao diện máy tính và thiết bị di động.
• Không dùng nhiều filter nếu một hiệu ứng đơn giản đã đáp ứng được yêu cầu.

Đặc biệt, nên kiểm tra kích thước và độ phân giải của hình ảnh khi sử dụng filter trên nhiều phần tử cùng lúc. Với trang có nhiều ảnh lớn, hiệu ứng phức tạp có thể làm trình duyệt phải xử lý thêm trong quá trình hiển thị.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính filter trong CSS.