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

Điều chỉnh các hiệu ứng như mờ và độ sáng bằng thanh trượt, tạo mã CSS filter trong khi xem trước

Thông tin cập nhậtThêm Trình tạo bộ lọc CSS, tạo bằng cách điều chỉnh độ mờ và độ sángXem thông tin cập nhật

Tính năng

9 loại hiệu ứng với thanh trượt

Mỗi lần di chuyển, bản xem trước và mã CSS đều thay đổi cùng lúc

Thử nghiệm với hình ảnh của bạn

Hiển thị hình ảnh trên máy của bạn trong trình duyệt để kiểm tra hiệu ứng

Chỉ xem hình gốc khi nhấn

So sánh ngay hình ảnh trước và sau khi áp dụng hiệu ứng

Điều chỉnh từ 8 mẫu sẵn có

Bắt đầu từ các mẫu như sépia hay cổ điển, sau đó điều chỉnh chi tiết

Cách sử dụng

Chọn hình ảnh

Chọn hình ảnh trên máy bằng "Chọn hình ảnh của tôi". Nếu không chọn, bạn có thể thử với hình ảnh mẫu tích hợp sẵn

Điều chỉnh hiệu ứng

Chọn mẫu gần nhất với phong cách bạn muốn, hoặc điều chỉnh mức độ mạnh yếu của từng hiệu ứng bằng thanh trượt

So sánh trước và sau

Nhấn giữ "So sánh với hình gốc" để xem hình ảnh không có hiệu ứng

Sao chép mã

Nhấn nút "Sao chép" để sao chép dòng lệnh filter vào CSS của bạn

Trường hợp sử dụng

Dễ đọc hơn cho chữ trên ảnh nền

Làm mờ hình nền một chút để làm cho tiêu đề phía trên dễ đọc hơn

Thống nhất tông màu hình ảnh

Thống nhất các hình ảnh trên trang nhóm hoặc thư viện ảnh bằng cách chuyển thành đen trắng hoặc sépia

Xác định giá trị bằng ảnh của bạn

Áp dụng lên ảnh thực tế mà bạn sẽ sử dụng để xác định giá trị cho hiệu ứng mờ hoặc cổ điển

Điều chỉnh hình ảnh cho chế độ tối

Xác định giá trị độ sáng và độ tương phản thấp hơn để hình ảnh không chói mắt trên nền tối

Kiến thức cơ bản

Hàm và đơn vị của filter

Thuộc tính filter CSS được dùng để tạo các hiệu ứng cho hình ảnh và phần tử, bằng cách viết các hàm như blur hay sepia cách nhau bằng khoảng trắng.

px (pixel)：Hàm blur chỉ định bán kính làm mờ tính bằng px. Khi thiết lập 4px, màu sắc sẽ hòa nhập trong phạm vi bán kính 4 pixel.
% (phần trăm)：Các hàm như brightness hay sepia chỉ định mức độ hiệu ứng bằng %. Với hàm brightness, 100% là độ sáng gốc, 120% là sáng hơn 2 lần.
deg (độ)：Hàm hue-rotate chỉ định góc xoay màu trên vòng tròn màu bằng deg. Với giá trị 180deg, màu sẽ chuyển sang màu đối diện trên vòng tròn.

Tại sao kết quả thay đổi khi thay đổi thứ tự

Các hàm trong filter được áp dụng từ trái sang phải, hiệu ứng tiếp theo được áp dụng lên kết quả của hiệu ứng trước đó, nên thay đổi thứ tự sẽ thay đổi kết quả. Ví dụ, áp dụng đen trắng trước rồi sépia sẽ giữ lại sắc thái nâu, còn áp dụng sépia trước rồi đen trắng sẽ loại bỏ sắc thái nâu. Công cụ này sử dụng thứ tự áp dụng cố định, nhưng bạn có thể chỉnh sửa mã CSS được tạo ra để thay đổi thứ tự.

Khác biệt với backdrop-filter

filter và backdrop-filter là các thuộc tính sử dụng cùng các hàm, nhưng chúng áp dụng hiệu ứng lên các đối tượng khác nhau.

filter：filter áp dụng hiệu ứng lên chính phần tử được chỉ định (ảnh, chữ, v.v.)
backdrop-filter：backdrop-filter áp dụng hiệu ứng lên phần thấy được phía sau phần tử, thường được dùng để tạo hiệu ứng kính mờ.