toolsmoah

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

Một công cụ trực quan để tạo và xem trước các thuộc tính bộ lọc CSS.

Cài đặt bộ lọc
Điều chỉnh từng thuộc tính bộ lọc
Cài đặt sẵn
Thử các kiểu bộ lọc được xác định trước
Xem trước
Xem các hiệu ứng bộ lọc đã tạo trên ảnh mặc định

Gốc

Hình nền Windows XP Bliss

Đã lọc

Hình nền Windows XP Bliss đã lọc
Filter Preview
CSS đã tạo
filter: none;
Giải thích các hàm bộ lọc CSS

Hiệu ứng hình ảnh

  • • blur(px): Hiệu ứng làm mờ
  • • brightness(%): Điều chỉnh độ sáng
  • • contrast(%): Điều chỉnh độ tương phản
  • • opacity(%): Điều chỉnh độ mờ

Hiệu ứng màu sắc

  • • grayscale(%): Hiệu ứng thang độ xám
  • • hue-rotate(deg): Xoay màu
  • • invert(%): Đảo ngược màu
  • • saturate(%): Điều chỉnh độ bão hòa
  • • sepia(%): Hiệu ứng màu nâu đỏ

Mẹo sử dụng

  • • Kết hợp nhiều bộ lọc được phân tách bằng dấu cách
  • • Áp dụng cho bất kỳ phần tử HTML nào, không chỉ hình ảnh
  • • Sử dụng với hoạt ảnh CSS để tạo hiệu ứng động
  • • Sử dụng backdrop-filter để chỉ áp dụng cho nền
    Trình tạo bộ lọc CSS