Trình tạo Glassmorphism CSS

Tạo các hiệu ứng giao diện kiểu kính mờ thời thượng với xem trước trực tiếp. Tùy chỉnh và sao chép mã CSS.

10px
25%
180%
30%
16px

Thẻ kính

Đây là một hiệu ứng glassmorphism được tạo bằng CSS thuần.

Mã CSS

Glassmorphism là gì?

Glassmorphism là một xu hướng thiết kế giao diện đề cao các phần tử kiểu kính mờ để lộ nền thông qua một hiệu ứng làm mờ. Nó sử dụng thuộc tính CSS backdrop-filter: blur(), các nền bán trong suốt và các viền tinh tế cho một kết xuất hiện đại và nhiều lớp. Nó phổ biến trong các giao diện dashboard, các thẻ và modal.

Khả năng tương thích trình duyệt

backdrop-filter được hỗ trợ bởi tất cả các trình duyệt hiện đại: Chrome, Edge, Safari và Firefox 103+. Cho các phiên bản Firefox cũ hơn, dự phòng một màu nền đặc.

Cách Hoạt Động

  1. Chọn màu nền. Glass cần thứ gì đó phía sau để nhìn thấy được. Chọn nền đơn sắc, gradient, hoặc ảnh cho khu vực xem trước để bạn có thể đánh giá cách blur hiển thị trong bố cục thực tế.
  2. Đặt blur và saturation. Bán kính blur mô phỏng sự tán xạ ánh sáng của kính mờ; saturation kéo màu sắc từ phía sau panel ra phía trước. Công thức theo phong cách Apple cổ điển là khoảng blur(10px) saturate(180%).
  3. Tinh chỉnh màu glass và độ trong suốt. Nền của phần tử phải có độ trong suốt một phần, màu mờ đục sẽ che hoàn toàn backdrop. Màu trắng hoặc đen ở alpha 10-30% là điểm khởi đầu thường dùng.
  4. Điều chỉnh viền và border-radius. Một viền trắng mảnh ở alpha thấp bắt chước phần sáng ở cạnh trong của kính vật lý. Border-radius khoảng 12-20px tạo ra giao diện soft-card mà hầu hết các thiết kế glassmorphism dùng.
  5. Sao chép CSS. Dán khối thuộc tính đã tạo vào stylesheet của bạn. Thêm dòng -webkit-backdrop-filter kèm theo nếu bạn cần hỗ trợ Safari cũ hơn.

Nguồn Gốc Thuật Ngữ

Hình ảnh cũ hơn tên gọi. Apple giới thiệu backdrop bị blur theo thời gian thực cho các panel thông báo và Control Center với iOS 7 vào năm 2013 và đưa lên desktop với macOS Yosemite năm sau, nhóm WebKit đã ra mắt thuộc tính CSS backdrop-filter vào tháng 8 năm 2015 cụ thể vì, như bài viết ra mắt nêu, «ngôn ngữ thiết kế Giao diện người dùng cho iOS 7 và OS X Yosemite thay đổi để kết hợp các hiệu ứng blur backdrop đẹp.» Phiên bản Windows Vista «Aero Glass» trước đó của Microsoft (2007) là cùng ý tưởng, và Microsoft ghi lại hai vật liệu liên quan trong hệ thống Fluent hiện đại: Acrylic (trong suốt, mờ, với lớp noise) và Mica (biến thể mờ đục nhuộm màu desktop ra mắt với Windows 11). Tên duy nhất «glassmorphism» được đặt ra bởi nhà thiết kế người Ba Lan Michał Malewicz của Hype4 Academy vào tháng 11 năm 2020, đồng bộ với việc ra mắt macOS Big Sur, tên nhất quán, cùng họ với «neumorphism» ra đời trước đó, đã cho các nhà thiết kế một từ vựng chung để thảo luận về kỹ thuật này.

Công Thức CSS

.glass-card {
  /* 1. Element background: must be partially transparent */
  background: rgba(255, 255, 255, 0.18);

  /* 2. The frosted-glass effect */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari 9-16 */

  /* 3. The inner-edge highlight */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 4. Soft corners */
  border-radius: 16px;
}

Ba điều cần ghi nhớ về công thức. Thứ nhất, nền của chính phần tử phải trong suốt hoặc trong suốt một phần, MDN nêu rõ: «Phần tử hoặc nền của nó phải trong suốt hoặc trong suốt một phần để hiệu ứng có thể nhìn thấy.» Một background-color hoàn toàn mờ đục che mẫu blur và người dùng thấy một panel phẳng. Thứ hai, hiệu ứng cần thứ gì đó phía sau để blur, glassmorphism không hoạt động trên trang trắng đồng nhất. Thứ ba, Safari hiện đại chấp nhận thuộc tính không có tiền tố, nhưng bất kỳ phiên bản nào cũ hơn Safari 17 cần cả backdrop-filter và -webkit-backdrop-filter.

Mười Hàm Filter

backdrop-filter được định nghĩa trong W3C Filter Effects Module Level 2 và chấp nhận cùng mười hàm filter như thuộc tính filter thông thường: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), và sepia(). Chúng có thể được kết nối chuỗi, và thứ tự quan trọng, chúng được áp dụng từ trái sang phải lên mẫu backdrop. Với glassmorphism, blur() cộng saturate() bao phủ giao diện chuẩn; mọi thứ khác là tinh chỉnh sáng tạo (ví dụ: brightness(105%) trên backdrop tối để nâng mẫu blur, hoặc contrast(120%) để giữ các quan hệ màu sắc sắc nét).

Hỗ Trợ Trình Duyệt và Tiền Tố -webkit-

Tính đến năm 2026, thuộc tính được hỗ trợ trong mọi trình duyệt evergreen. WebKit ra mắt đầu tiên vào ngày 10 tháng 8 năm 2015 với Safari 9 / iOS 9, sau tiền tố -webkit-backdrop-filter. Chrome thêm hỗ trợ không có tiền tố ở phiên bản 76 (tháng 7 năm 2019), Edge theo sau với chuyển đổi Chromium ở phiên bản 79, và Firefox 103 kích hoạt không cần flag vào ngày 26 tháng 7 năm 2022. MDN đánh dấu thuộc tính là Baseline 2024 (Mới có từ tháng 9 năm 2024) nghĩa là tất cả bốn engine chính hiện tương tác. Hỗ trợ thực tế ở khoảng 95% toàn cầu. Để bao phủ các bản Safari cũ (và người dùng PostCSS), hãy đưa cả khai báo có tiền tố và không tiền tố cạnh nhau hoặc để autoprefixer thêm tiền tố từ cấu hình Browserslist của bạn.

Fallback Cho Trình Duyệt Không Hỗ Trợ

Dùng truy vấn @supports để trình duyệt không hỗ trợ nhận fallback đặc có thể đọc được thay vì panel trong suốt không đọc được:

.glass-card {
  background: rgba(30, 41, 59, 0.92); /* opaque fallback */
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
  }
}

Hiệu Năng: Khi Nào Dùng (và Khi Nào Không)

backdrop-filter được tăng tốc GPU, nhưng không miễn phí. Mỗi bề mặt được lọc buộc trình duyệt duy trì một lớp compositing riêng và lấy mẫu lại khu vực phía sau phần tử. Dự thảo editor W3C thừa nhận điều này trực tiếp, chỉ ra rằng các backdrop filter lồng nhau hoặc xếp chồng có thể gây ra «các lượt render theo cấp số nhân,» và bài đăng ra mắt WebKit cảnh báo thuộc tính «buộc engine thực hiện nhiều lượt render hơn, điều này sẽ ảnh hưởng đến hiệu năng.» Tóm tắt ngắn gọn của Web.dev áp dụng: «backdrop-filter có thể ảnh hưởng đến hiệu năng. Hãy kiểm tra trước khi triển khai.»

Quy tắc thực tế: giữ bán kính blur dưới ~20px trong code production, tránh các bề mặt glass toàn viewport (một thanh nav glass vẽ lại mỗi khi scroll là vi phạm cổ điển), không xếp nhiều bề mặt đã lọc lên nhau, và tránh backdrop-filter trên các phần tử <video> khi blur phải tính lại mỗi frame. Microsoft nói với người dùng Acrylic điều tương tự trong tài liệu Fluent: «Hiệu ứng Acrylic tự động bị tắt khi thiết bị vào chế độ Battery Saver.»

Khả Năng Tiếp Cận: Bẫy Độ Tương Phản

Theo định nghĩa, glassmorphism làm giảm độ tương phản giữa văn bản và nền của nó, vì «nền» dưới panel là bất cứ thứ gì phía sau nó, và điều đó thay đổi khi người dùng scroll hoặc đổi hình nền. Mức tối thiểu WCAG 2.1 liên quan (4,5:1 cho văn bản thân bài thông thường, 3:1 cho văn bản lớn hoặc đậm) phải được đáp ứng so với backdrop xấu nhất, không phải trung bình. Hướng dẫn thực tế: giữ văn bản thân bài tránh khỏi glass panel và chủ yếu dùng chúng cho chrome (card, header, modal) nơi việc đọc thực sự xảy ra trên bề mặt có độ mờ cao hơn. Luôn cung cấp biến thể fallback không trong suốt cho người dùng đã tắt transparency ở cấp OS, cả macOS (System Settings → Accessibility → Display → Reduce transparency) và Windows (Settings → Personalization → Colors → Transparency effects) đều hiển thị công tắc, và CSS có thể phát hiện nó:

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

Glassmorphism Hiệu Quả Ở Đâu và Không Hiệu Quả Ở Đâu

Những Sai Lầm Phổ Biến

  1. Quên nền trong suốt. Đặt backdrop-filter trên phần tử có background-color mờ đục không tạo ra hiệu ứng nhìn thấy được, màu mờ đục che mẫu blur. Luôn kết hợp với nền rgba()/hsla().
  2. Glass trên màu phẳng. Nếu không có gì thú vị phía sau panel, việc blur không tạo ra «glass», chỉ là một hình chữ nhật nhuộm màu nhạt. Hiệu ứng cần ảnh, gradient, hoặc backdrop phong phú để có tác dụng.
  3. Bỏ qua tiền tố -webkit-. Các bản Safari cũ cần nó. Hãy gửi cả hai dòng hoặc dùng autoprefixer.
  4. Xếp quá nhiều panel. Mỗi bề mặt đã lọc là một lớp GPU riêng. Ba hoặc bốn thường là giới hạn thực tế trước khi tốc độ frame giảm trên mobile.
  5. Không kiểm tra độ tương phản trong trường hợp xấu nhất. Kiểm tra panel so với các vùng sáng nhất và tối nhất của mỗi backdrop nó sẽ nằm trên, không chỉ một ảnh chụp màn hình demo.
  6. Animate bán kính blur. Chuyển đổi backdrop-filter: blur(0) → blur(20px) khi hover về mặt kỹ thuật được phép nhưng tính lại blur mỗi frame và là cách dễ nhất để gây hại hiệu năng scroll. Hãy animate opacity hoặc transform thay thế và giữ blur tĩnh.

Câu Hỏi Thường Gặp

Tại sao glass card của tôi trông giống panel phẳng?

background-color của phần tử hoàn toàn mờ đục. backdrop-filter blur bất cứ thứ gì phía sau phần tử, nhưng phần tử vẽ lên trên. Với nền mờ đục, lớp sơn đó che mẫu blur. Chuyển sang rgba() hoặc hsla() ở alpha 10-30%, điểm ngọt ngào cho hầu hết các thiết kế glassmorphism.

Có hoạt động được trong Safari không?

Có, Safari là trình duyệt đầu tiên ra mắt thuộc tính này, vào tháng 8 năm 2015. Các phiên bản Safari cũ hơn cần tiền tố -webkit-backdrop-filter; Safari hiện đại chấp nhận dạng không tiền tố. Đưa vào cả hai giữ cho cùng một CSS hoạt động trên mọi bản Safari vẫn đang được sử dụng.

Glassmorphism có thể tiếp cận được không?

Chỉ khi bạn thiết kế cho backdrop xấu nhất. WCAG 2.1 yêu cầu tỷ lệ tương phản 4,5:1 cho văn bản thông thường và 3:1 cho các thành phần UI lớn hoặc đậm, đo lường so với màu sắc nào nằm dưới panel. Cung cấp fallback mờ đục theo media query prefers-reduced-transparency để người dùng đã tắt transparency ở cấp OS nhận được bề mặt có thể đọc được.

Có ảnh hưởng đến hiệu năng không?

Có thể. Mỗi bề mặt đã lọc buộc trình duyệt duy trì một lớp compositing riêng và lấy mẫu lại khu vực phía sau, và bán kính blur lớn hoặc các panel xếp chồng làm tăng chi phí. Giữ bán kính dưới khoảng 20px, tránh các panel toàn viewport, và đừng đặt nó trên <video>. Hướng dẫn chính thức của Web.dev là kiểm tra trên thiết bị cấp thấp đại diện trước khi triển khai.

Sự khác biệt giữa glassmorphism và neumorphism là gì?

Neumorphism (được đặt ra trước đó vài tháng) tạo ra ảo giác hình dạng nhựa mềm nổi bằng cách kết hợp shadow trong và ngoài trên cùng màu phẳng với nền trang, không có độ trong suốt, không có blur. Glassmorphism giữ nền trang nhìn thấy qua panel trong suốt, mờ. Chúng là các phong cách bổ sung cho nhau hơn là cạnh tranh, và một số thiết kế dùng cả hai: ví dụ như nút neumorphic trên glass card.

Tôi có thể sao chép CSS để dùng trong production không?

Có. Đầu ra là CSS thuần sử dụng các thuộc tính chuẩn, không có phần mở rộng độc quyền, không có JavaScript. Thả rule vào stylesheet của bạn và áp dụng class cho phần tử nào cần trông như glass.

Công cụ liên quan

Trình tạo gradient CSS

Tạo các gradient CSS tuyệt đẹp một cách trực quan.

Trình tạo bóng CSS

Trình xây dựng trực quan box-shadow với xem trước trực tiếp.

Trình tạo border-radius

Thiết kế một border-radius CSS một cách trực quan.