Trình tạo hiệu ứng backdrop-filter cho CSS.

Xây dựng CSS backdrop-filter trực tiếp bằng cách kéo các thanh trượt của chín hàm bộ lọc: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate và sepia. Đầu ra phát ra cả backdrop-filter và -webkit-backdrop-filter để hiệu ứng hoạt động trên các trình duyệt hiện đại, và một thẻ kính được kết xuất trên nền tùy chỉnh để bạn thấy kết quả trong khi tinh chỉnh.

1. Tùy chọn nhấp vào một cài đặt sẵn (Frosted Glass, Dark Glass, Vintage, Inverted) để bắt đầu từ một giao diện được tuyển chọn. 2. Kéo các thanh trượt trong bảng Controls; mỗi bộ lọc chỉ xuất hiện trong CSS đã tạo khi nó khác với giá trị mặc định (ví dụ: brightness/contrast/saturate/opacity mặc định 100, blur mặc định 0). 3. Chỉnh sửa trường Background với bất kỳ giá trị CSS background hợp lệ nào (gradient, url hình ảnh, màu) để kiểm tra bộ lọc trên các nền khác nhau. 4. Nhấp vào Copy để sao chép cả hai khai báo backdrop-filter và -webkit-backdrop-filter.

blur 0–50px; brightness 0–200% (mặc định 100); contrast 0–200% (mặc định 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100% (mặc định 100); saturate 0–200% (mặc định 100); sepia 0–100%. Reset khôi phục mọi thanh trượt về giá trị mặc định. Các bộ lọc ở giá trị trung tính bị bỏ qua trong đầu ra; nếu tất cả đều trung tính thì đầu ra là backdrop-filter: none.