Backdrop-filter dùng để làm gì?

backdrop-filter áp filter lên phần nền phía sau element, không phải lên chính element.

.app-bar {
  background: rgb(255 255 255 / 0.72);   /* BẮT BUỘC bán trong suốt */
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}

So với filter:

.a { filter: blur(4px); }            /* làm mờ CHÍNH element và nội dung bên trong */
.b { backdrop-filter: blur(4px); }   /* làm mờ những gì nằm SAU element */

Dùng cho: thanh điều hướng dính trong suốt, lớp phủ modal, thẻ kiểu glassmorphism, overlay trên ảnh.

Lưu ý 1: quên nền bán trong suốt. Nền đục hoàn toàn thì không có gì nhìn xuyên qua để làm mờ — hiệu ứng biến mất hoàn toàn.

Lưu ý 2: backdrop-filter tạo stacking context mới, có thể phá thứ tự z-index đang đúng.

Lưu ý 3: chi phí thật. Mỗi lần cuộn, browser phải vẽ lại vùng mờ; đặt trên element lớn hoặc nhiều element cùng lúc là nguyên nhân giật khi cuộn trên máy yếu. Giới hạn ở một thanh header hoặc một lớp overlay.

Dự phòng: kiểm tra hỗ trợ trước khi giảm độ đục của nền, để trình duyệt cũ không hiện chữ trên nền gần như trong suốt:

@supports (backdrop-filter: blur(1px)) {
  .app-bar { background: rgb(255 255 255 / 0.72); }
}