🌐 Mục Lục

1. Giới thiệu
2. Cơ bản về Bộ lọc CSS
3. Vấn đề với Blur Mặc định
4. Mở rộng Blur với mask-image
5. Xử lý Sự kiện Con trỏ
6. Khắc phục Hiện tượng Nhấp nháy
7. Kính Mờ Dày và Thực Tế Hơn
8. Hỗ trợ Trình duyệt và Những Vấn đề Thường Gặp
9. Thêm Đường Vi Kính Mờ
10. Mã Tối Ưu Cuối Cùng
11. Góc Bo Tròn với SVG Masks
12. Tiếp Tục Học Hỏi

Giới thiệu

Hiệu ứng kính mờ có thể nâng cao bất kỳ giao diện nào - từ thanh điều hướng, sidebar đến overlay modal. Bạn có thể đã thấy nó trong iOS, macOS hoặc các bảng điều khiển SaaS cao cấp.

Nhưng có một điều cần lưu ý: việc cài đặt mặc định của backdrop-filter chỉ xem xét các pixel ngay sau yếu tố. Điều này không phản ánh đúng cách kính mờ hoạt động trong thực tế. Với một vài điều chỉnh thông minh, chúng ta có thể làm cho kính của mình trông tự nhiên hơn nhiều.

Cơ bản về Bộ lọc CSS

CSS cho phép chúng ta áp dụng các bộ lọc như blur, độ sáng hoặc hue-rotate cho bất kỳ yếu tố nào:

img {
  filter: blur(4px) sepia(50%);
}

Thậm chí thú vị hơn, backdrop-filter áp dụng bộ lọc cho những gì nằm phía sau một yếu tố:

.glass {
  backdrop-filter: blur(16px);
}

Đây là nền tảng của cái nhìn kính mờ. Nhưng nó cần được tinh chỉnh.

Vấn đề: Blur Hạn Chế

Mặc định, blur chỉ ảnh hưởng đến các pixel ngay sau yếu tố. Điều đó có nghĩa là nếu một đối tượng ở gần nhưng không chồng lên, nó sẽ không góp phần vào blur.

Trong kính mờ thực tế, ánh sáng bị tán xạ - vì vậy các đối tượng gần đó vẫn ảnh hưởng đến những gì chúng ta thấy. Để khắc phục điều này, chúng ta mở rộng yếu tố nền ra ngoài các giới hạn hiển thị của nó và sau đó sử dụng mask-image để cắt nó trở lại vị trí.

Mở rộng Blur với mask-image

Đây là mẹo:

.backdrop {
  position: absolute;
  inset: 0;
  height: 200%; /* mở rộng khu vực blur */
  backdrop-filter: blur(16px);
  mask-image: linear-gradient(
    to bottom,
    black 0% 50%,
    transparent 50% 100%
  );
}

Yếu tố giờ đây lớn hơn nó trông, cho phép các màu sắc và hình dạng gần đó “chảy” vào blur, trong khi mặt nạ đảm bảo chỉ khu vực chính xác được hiển thị.

Xử lý Sự kiện Con trỏ

Một vấn đề: backdrop quá lớn chặn các cú nhấp chuột vào các yếu tố bên dưới nó.

Giải pháp rất đơn giản:

.backdrop {
  pointer-events: none;
}

Bằng cách này, nó trông giống như kính nhưng không gây cản trở với tương tác của người dùng.

Khắc phục Hiện tượng Nhấp nháy

Hiệu ứng cuộn đôi khi gây ra hiện tượng “nhấp nháy” khi các vật phẩm rời khỏi viewport. Một gradient nền ở trên cùng giúp:

.backdrop {
  background: linear-gradient(
    to bottom,
    hsl(0 0% 0%) 0%,
    transparent 50%
  );
}

Kính Mờ Dày và Thực Tế Hơn

Nếu blur trông quá mạnh hoặc gây phân tâm, hãy thử:

• Tăng bán kính blur, hoặc
• Thêm màu nền bán trong suốt:

header {
  background: hsl(0 0% 100% / 0.5);
}

Điều này làm mềm kính, giúp nó dễ đọc hơn và ít “bận rộn” hơn.

Hỗ trợ Trình duyệt và Những Vấn đề Thường Gặp

• backdrop-filter: ~97% hỗ trợ
• mask-image: ~96% hỗ trợ
• Cảnh giác với vấn đề của Firefox, đặc biệt với position: sticky và overflow/border-radius của tổ tiên.
• Luôn sử dụng truy vấn tính năng để cung cấp các phương án dự phòng.

Thêm Đường Vi Kính Mờ

Muốn đẩy realism xa hơn? Thêm một yếu tố bị blur thứ hai để bắt chước cạnh kính:

.backdrop-edge {
  height: 100%;
  backdrop-filter: blur(8px) brightness(120%);
  mask-image: linear-gradient(
    to bottom,
    black 0,
    black 6px,
    transparent 6px
  );
}

Điều này tạo ra ảo giác về độ dày kính 3D.

Mã Tối Ưu Cuối Cùng

Dưới đây là đoạn mã hoàn chỉnh, sẵn sàng cho sản xuất với các phương án dự phòng:

header {
  position: sticky;
  top: 0;
  background: hsl(0 0% 100% / 0.95);
}

@supports (backdrop-filter: blur(16px)) {
  header {
    background: hsl(0 0% 100% / 0.5);
  }

  .backdrop {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(16px);
    mask-image: linear-gradient(to bottom, black 0 50%, transparent 50% 100%);
    pointer-events: none;
  }
}

Góc Bo Tròn với SVG Masks

Vì mask-image không tôn trọng border-radius, hãy sử dụng một mặt nạ SVG thay thế cho các tấm kính bo tròn:

<svg class="svg-mask">
  <mask id="frostyGlassMask">
    <rect width="100%" height="100%" fill="white" rx="8" ry="8"/>
  </mask>
</svg>

Tiếp Tục Học Hỏi

Nếu bài viết này làm bạn hào hứng, tôi khuyên bạn nên tìm hiểu sâu hơn về bộ lọc CSS, mặt nạ và các kỹ thuật ghép hình. Những chi tiết nhỏ này có thể biến giao diện của bạn từ “tốt” thành “đẳng cấp thế giới.”

Thiết kế UI hiện đại phát triển dựa trên sự tinh tế - và không gì nói lên sự tinh tế bằng một hiệu ứng kính mờ hoàn hảo.

💡 Đến lượt bạn: Hãy thử những mẹo này trong dự án tiếp theo của bạn. Blur, tăng độ sáng, thêm cạnh hoặc thử nghiệm với độ bão hòa cho đến khi kính mờ của bạn cảm thấy hoàn hảo!