Liquid Glass là gì? Hiệu ứng kính kiểu Apple và cách tạo bằng CSS

Liquid Glass là ngôn ngữ thiết kế kính Apple ra mắt ngày 09/06/2025. Bài giải thích 5 lớp làm nên hiệu ứng, cách tạo bằng CSS backdrop-filter và công cụ kính mờ của ColorME, hiệu ứng Glass trong Figma và cách giữ chữ trên kính dễ đọc.

Trả lời nhanh: Liquid Glass là ngôn ngữ thiết kế Apple giới thiệu ngày 09/06/2025 cho iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 và tvOS 26. Nút, thanh tab và thanh bên được làm như một lớp kính bán trong suốt, nổi trên nội dung, làm mờ và nhuộm màu theo những gì nằm phía sau. Trên web, designer tạo lại vẻ ngoài này bằng thuộc tính CSS backdrop-filter cộng với nền trắng trong suốt, một điểm sáng, viền sáng và bóng đổ.

Demo CSS của ColorME: thẻ “đang phát” và thanh tab dạng kính nổi trên ảnh, dựng bằng backdrop-filter (ảnh nền: Russell Barre' / Unsplash).

Liquid Glass là gì theo cách Apple mô tả?

Thông cáo báo chí bản tiếng Việt của Apple ngày 09/06/2025 (“Apple ra mắt thiết kế phần mềm mới thú vị và thanh lịch”) viết: “Vật liệu mới, Liquid Glass, bán trong suốt và có nguyên lý hoạt động như thủy tinh trong thế giới thực. Màu sắc của nó sẽ phản ánh nội dung xung quanh và thích ứng thông minh giữa môi trường sáng và tối.”

Cũng trong thông cáo đó, Apple nói vật liệu này “phản chiếu và khúc xạ môi trường xung quanh” và “sử dụng kết xuất thời gian thực và phản ứng linh hoạt với chuyển động có các điểm sáng phản chiếu”. Nó được dùng từ những phần nhỏ như nút, công tắc, thanh trượt đến thanh tab và thanh bên. Đây là lần đầu một thiết kế chung được áp dụng trên cả năm hệ điều hành cùng lúc.

Trang Human Interface Guidelines (HIG) mục Materials của Apple, đọc ngày 03/11/2026, giải thích vai trò của lớp kính: “Liquid Glass forms a distinct functional layer for controls and navigation elements” (Liquid Glass là một lớp chức năng riêng cho nút điều khiển và điều hướng), nổi phía trên lớp nội dung. Ba lời khuyên trên trang này đáng nhớ với designer:

• “Don’t use Liquid Glass in the content layer.” Không đặt kính vào lớp nội dung như nền ứng dụng; kính dành cho thanh điều hướng, nút, bảng nổi.
• “Use Liquid Glass effects sparingly.” Dùng tiết chế, chỉ cho những thành phần chức năng quan trọng nhất.
• Hai biến thể regular và clear. Bản regular làm mờ và chỉnh độ sáng nền để chữ dễ đọc, dùng cho cảnh báo, thanh bên, popover. Bản clear trong hơn, dùng cho nút nổi trên ảnh và video.

Nói ngắn gọn: Liquid Glass là cách Apple làm phần điều khiển, không phải một bộ lọc ảnh. Khi designer nói “làm hiệu ứng Liquid Glass” trên poster, web hay mockup, họ thường muốn vẻ ngoài kính mờ kiểu Apple: lớp kính mờ, trong, có ánh sáng ở mép, nổi trên một hình nền nhiều màu.

Liquid Glass khác glassmorphism thế nào?

Glassmorphism là phong cách giao diện có khung nửa trong suốt làm mờ phần nền phía sau, phổ biến trên web từ vài năm trước. Liquid Glass của Apple đi xa hơn ở ba điểm mà Apple tự mô tả: kính khúc xạ (bẻ cong) nội dung ở mép, có điểm sáng phản chiếu phản ứng theo chuyển động, và tự đổi sáng tối theo nội dung phía sau.

Vì vậy bản CSS trong bài này tạo được vẻ ngoài kính kiểu Apple trên ảnh tĩnh và trang web, nhưng không có độ khúc xạ ở mép và không phản ứng khi nghiêng máy. Ai cần bản có khúc xạ để làm mockup thì xem phần Figma bên dưới.

5 lớp làm nên hiệu ứng kính

Nhìn kỹ một thanh tab kiểu Liquid Glass, bạn sẽ thấy năm thứ chồng lên nhau. Thiếu một lớp là kính trông như miếng nhựa mờ hoặc như ô chữ nhật dán lên ảnh.

1. Làm mờ nền phía sau (backdrop blur): thứ quan trọng nhất. Ảnh phía sau nhòe đi thành mảng màu, chữ trên kính mới có chỗ đứng.
2. Độ trong (translucency): một lớp nền trắng hoặc tối rất mỏng, khoảng 15 đến 45% độ đục, cộng chút tăng độ rực màu để kính không bị xám.
3. Điểm sáng phản chiếu (specular highlight): một vệt sáng mềm ở góc trên, như ánh đèn rơi lên mặt kính.
4. Viền sáng (rim light): đường viền trắng mảnh, sáng hơn ở mép trên, cho cảm giác cạnh kính có độ dày.
5. Chiều sâu (depth): bóng đổ mềm bên dưới để tấm kính nổi lên khỏi nền.

Cùng một khung chữ, mỗi ô thêm một lớp CSS: từ chữ trắng đặt thẳng lên ảnh đến tấm kính đủ 5 lớp (demo CSS của ColorME; ảnh nền: Russell Barre' / Unsplash).

Ở ô 0, chữ trắng đặt thẳng lên ảnh gần như biến mất giữa những bông hoa. Chỉ cần lớp 1 (làm mờ) là chữ đã đọc được. Các lớp 3, 4, 5 không làm chữ dễ đọc hơn, chúng làm tấm kính trông “thật”. Ảnh nền là cánh đồng mao lương nhiều màu: kính mờ luôn đẹp nhất trên nền giàu màu và nhiều chi tiết, vì trên nền trơn thì chẳng có gì để làm mờ. Tham khảo thêm các thuật ngữ blur và opacity trong thư viện ColorME.

Cách tạo hiệu ứng kính bằng công cụ Đổ bóng & kính mờ CSS

Cách nhanh nhất để có mã CSS kính mờ là công cụ Đổ bóng & kính mờ CSS của ColorME. Trang hỏi đáp của công cụ ghi: “Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt.” Các ảnh chụp dưới đây được ColorME chụp ngày 03/11/2026 trên Chrome máy tính, không đăng nhập.

Bước 1: mở công cụ và chọn thẻ Kính mờ

Công cụ có hai chế độ ở khung bên phải: Đổ bóng và Kính mờ. Bấm Kính mờ. Khung xem thử bên trái áp kính lên tấm thẻ tên đặt trên ảnh chân dung, nhãn đen phía trên ghi thông số đang dùng: “Kính mờ · mờ 16px · trong 35%”.

Thẻ Kính mờ: mặc định mờ 16px, trong 35%, rực 160%, ô mã cập nhật ngay (ảnh chụp màn hình: ColorME, Chrome máy tính, chưa đăng nhập, 03/11/2026).

Mặc định là màu kính #FFFFFF, Độ mờ nền 16px, Độ trong 35%, Độ rực nền 160%. Ô mã bên dưới hiện ngay background: rgba(255, 255, 255, 0.35) và backdrop-filter: blur(16px) saturate(160%).

Bước 2: chọn một mẫu kính có sẵn

Bấm Mẫu có sẵn ở giữa trang. Bảng mở ra có hai nhóm: Đổ bóng (Mềm, Nổi, Sâu, Viền mảnh, Lõm vào, Đổ lệch) và Kính mờ (Kính trong, Kính sương, Kính khói). Bấm một mẫu, các thanh bên phải nhảy theo và bảng mẫu tự đóng lại.

Mẫu có sẵn: nhóm Kính mờ gồm Kính trong, Kính sương, Kính khói (ảnh chụp màn hình: ColorME, Chrome máy tính, chưa đăng nhập, 03/11/2026).

Kính sương cho ra mờ 24px, trong 45%, rực 140% và viền trắng 60%: đây là mẫu gần tinh thần bản regular của Apple nhất trong ba mẫu, vì nền phía sau bị che nhiều hơn nên chữ dễ đọc hơn. Kính khói dùng màu kính tối #101828, hợp với nền tối.

Bước 3: đổi nền xem thử, kéo thanh và chỉnh Viền sáng

Ở góc trên khung xem thử có hàng Nền xem thử với bốn chấm: Nền dịu, Nền trắng, Nền tối, Nền nhiều màu. Chọn Nền nhiều màu để thấy kính trên nền giống thực tế hơn. Sau đó kéo ba thanh: Độ mờ nền (0 đến 40px), Độ trong (0 đến 100%), Độ rực nền (100 đến 200%). Nút Tuỳ chỉnh mở thêm thanh Viền sáng.

Nền nhiều màu, mờ 24px, trong 25%, rực 180%, Viền sáng 70% trong Tuỳ chỉnh (ảnh chụp màn hình: ColorME, Chrome máy tính, chưa đăng nhập, 03/11/2026).

Trong ảnh trên, các thanh được đặt ở mờ 24px, trong 25%, rực 180%, viền sáng 70%. Ô mã cập nhật thành background: rgba(255, 255, 255, 0.25), backdrop-filter: blur(24px) saturate(180%) và border: 1px solid rgba(255, 255, 255, 0.7). Một mẹo nhỏ: độ trong càng thấp thì kính càng “trong” và chữ càng khó đọc, nên tăng độ mờ nền khi giảm độ trong.

Bước 4: thử Kính khói trên nền tối rồi sao chép CSS

Mẫu Kính khói đổi màu kính sang #101828, mờ 16px, trong 30%, rực 120%. Chọn chấm Nền tối để xem: tấm thẻ tên trông như kính ám khói. Bấm Sao chép CSS ở cuối khung, nút chuyển thành “Đã chép CSS” màu xanh.

Kính khói (#101828, mờ 16px, trong 30%, rực 120%) trên Nền tối; bấm Sao chép CSS, nút đổi thành Đã chép CSS (ảnh chụp màn hình: ColorME, Chrome máy tính, chưa đăng nhập, 03/11/2026).

Đoạn mã sao chép từ mẫu Kính khói gồm sáu dòng:

background: rgba(16, 24, 40, 0.3);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(16, 24, 40, 0.12);

Công cụ không có thanh cho điểm sáng phản chiếu. Muốn đủ năm lớp như Liquid Glass, thêm phần điểm sáng ở mục kế tiếp. Chế độ Đổ bóng của cùng công cụ có bóng nhiều lớp nếu bạn muốn chiều sâu mềm hơn.

Tự viết CSS Liquid Glass: bản demo của ColorME

Ảnh đầu bài và ảnh “5 lớp” là bản demo HTML/CSS do ColorME tự dựng, chụp bằng Chrome, không phải mã của Apple. Toàn bộ dựa trên một thuộc tính: theo MDN, backdrop-filter “lets you apply graphical effects such as blurring or color shifting to the area behind an element” (cho phép làm mờ hoặc đổi màu vùng phía sau phần tử), và vì nó tác động lên những gì nằm phía sau, phần tử hoặc nền của nó phải trong suốt hoặc trong suốt một phần thì mới thấy. MDN xếp thuộc tính này vào Baseline 2024: chạy trên các trình duyệt mới từ tháng 9/2024.

.the-kinh {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  background: rgba(255, 255, 255, .18);                 /* lớp 2: độ trong */
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);         /* lớp 1: làm mờ nền */
  border: 1px solid rgba(255, 255, 255, .5);          /* lớp 4: viền sáng */
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .9),          /* mép trên sáng hơn */
    0 34px 46px -6px rgba(10, 6, 30, .8);             /* lớp 5: chiều sâu */
}
.the-kinh::before {                                    /* lớp 3: điểm sáng */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(130% 90% at 12% -15%,
    rgba(255, 255, 255, .85), rgba(255, 255, 255, .12) 50%, transparent 70%);
}
@supports not (backdrop-filter: blur(1px)) {
  .the-kinh { background: rgba(255, 255, 255, .85); }  /* trình duyệt cũ: nền đặc */
}

Vài điều rút ra khi dựng demo:

• Ảnh nền quyết định 70% vẻ đẹp. Hai bản hero được dựng thử: bản trên ảnh vệt sáng nhiều màu bị loại vì vùng hồng quá sáng làm chữ trắng nhạt hẳn; bản trên cánh đồng hoa được giữ, thêm một lớp tối nhẹ phía sau tiêu đề.
• saturate() giữ màu cho kính. Làm mờ mạnh làm màu bị xám; tăng độ rực 140 đến 180% đưa màu sống lại.
• Bo góc lồng nhau phải khớp. Nút bên trong thanh kính bo nhỏ hơn thanh một khoảng bằng phần đệm, giống cách Apple làm các góc “đồng tâm” với góc màn hình.

Trước và sau trên cùng một giao diện điện thoại của tiệm hoa mẫu “Mộc Lan” (tên tự đặt): khối trắng đặc che mất nửa tấm ảnh, còn khối kính để màu hoa đi xuyên qua.

Trước: khối trắng đặc. Sau: cùng bố cục làm bằng kính mờ, màu hoa đi xuyên qua (demo CSS của ColorME, tiệm hoa mẫu tự đặt tên; ảnh nền: Russell Barre' / Unsplash).

Liquid Glass trong Figma: hiệu ứng Glass và Background blur

Phần này chỉ mô tả theo trang trợ giúp “Apply effects to layers” của Figma, đọc ngày 03/11/2026. Phần Figma chưa được thử trực tiếp cho bài này, nên bài không có ảnh chụp Figma.

Theo trang trợ giúp, Figma hiện có bảy loại hiệu ứng, trong đó có Glass: “The glass effect gives layers a translucent quality that dynamically alters the appearance of objects beneath them.” (Hiệu ứng glass làm lớp trở nên trong suốt và thay đổi linh hoạt vẻ ngoài của các đối tượng bên dưới). Cách thêm: chọn lớp, bấm dấu cộng ở mục Effects, chọn Glass, rồi mở Effect settings để chỉnh:

Những giới hạn trang trợ giúp nêu rõ: “Glass will not be visible on objects with a fill set to 100% opacity”, Glass không xuất được sang SVG, không có phản chiếu môi trường, và không dùng chung với Background blur trên cùng một đối tượng (chỉ hiệu ứng gặp trước được hiển thị). Trang cũng cho biết bộ UI kit iOS và iPadOS 26 của Apple trên Figma dùng chính hiệu ứng glass này để mô phỏng Liquid Glass.

Cách cũ là Background blur: “Figma will blur any layers behind your selection on the canvas.” Để thấy hiệu ứng, fill của lớp phải có độ mờ (opacity) “between .10 and 99.99%”, tức không đặc 100%. Background blur tương đương backdrop-filter: blur() trong CSS, nên phù hợp khi bạn thiết kế cho web và cần lập trình viên làm lại đúng như thiết kế. Nếu mới dùng Figma, đọc thêm bài Auto Layout trong Figma để dựng thanh tab và thẻ co giãn trước khi phủ kính.

Chữ trên kính có đọc được không?

Đây là chỗ hiệu ứng kính hay hỏng nhất. HIG của Apple khuyên với bản clear: “If the underlying content is bright, consider adding a dark dimming layer of 35% opacity.” (Nếu nội dung phía sau sáng, hãy cân nhắc thêm một lớp tối độ mờ 35%). Bản demo dưới đây đặt cùng một khung kính trong lên ảnh hoa anh đào màu nhạt, trước và sau khi thêm lớp tối 35% bên trong khung.

Cùng khung kính trên ảnh sáng, trước và sau lớp tối 35% bên trong khung (demo CSS của ColorME; ảnh nền: Anita Austvika / Unsplash).

Để có con số thay vì cảm giác, màu trung bình phía sau dòng chữ nhỏ ở mỗi khung được đo trên ảnh xuất ra: #E3B9B2 (trước) và #957A76 (sau), rồi nhập vào công cụ Kiểm tra tương phản với chữ trắng #FFFFFF, không đăng nhập.

Chữ trắng trên màu nền đo được: 1.77:1 không đạt; sau lớp tối 35% còn 3.94:1, chỉ đạt cho chữ lớn (ảnh chụp màn hình: ColorME, colorme.vn/tools/contrast-checker, chưa đăng nhập, 03/11/2026).

• Trước: 1.77:1, công cụ báo “Không đạt, khó đọc” ở cả AA và AAA.
• Sau lớp tối 35%: 3.94:1, công cụ báo “Chỉ đạt cho chữ lớn”. Theo trang hỏi đáp của công cụ, chữ lớn là từ 24px, hoặc từ 18.66px nếu in đậm; chữ thường cần tối thiểu 4.5:1 để đạt AA.

Nghĩa là lớp tối 35% đủ cho tiêu đề lớn, nhưng dòng mô tả 22px trong demo vẫn chưa đạt AA. Có ba cách xử lý: tăng lớp tối lên, làm mờ nền mạnh hơn để màu phía sau phẳng lại, hoặc đổi sang kính sáng với chữ tối (công cụ gợi ý chữ #161616 trên nền #957A76 để đạt AA). Bài các cặp màu tương phản và thuật ngữ contrast giải thích thêm vì sao tỉ lệ này quan trọng.

Một lưu ý nữa từ HIG: người dùng có thể bật cài đặt giảm độ trong suốt hoặc tăng tương phản, và giao diện kính của Apple đổi theo. Trên web, bạn nên để sẵn bản nền đặc (như khối @supports ở trên) và kiểm tra lại tương phản trên ảnh sáng nhất mà khách có thể tải lên.

Công thức kính: lưu lại để dùng

Bảng tóm tắt dưới đây gom các con số trong bài: mã CSS năm lớp, ba mẫu ghi lại từ công cụ, các thông số Glass của Figma và hai ngưỡng tương phản.

Công thức kính lưu lại để dùng: mã CSS 5 lớp, ba mẫu của công cụ, thông số Glass của Figma theo trang trợ giúp, ngưỡng tương phản WCAG (bảng của ColorME).

Liquid Glass hợp nhất cho thanh điều hướng, nút nổi, thẻ thông tin trên ảnh, banner có ảnh nền đẹp. Nó không hợp cho khối chữ dài, bảng giá trị nhiều số hay giao diện cần đọc nhanh. Muốn học bài bản cách dựng giao diện, hệ lưới và thành phần trên Figma, bạn có thể xem khoá học Thiết kế UI/UX của ColorME, hoặc bắt đầu bằng danh sách 5 phần mềm thiết kế UI/UX.

Câu hỏi thường gặp về Liquid Glass

Liquid Glass là gì?

Liquid Glass là vật liệu thiết kế Apple giới thiệu ngày 09/06/2025 cho iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 và tvOS 26. Theo thông cáo của Apple, nó bán trong suốt, hoạt động như thủy tinh thật, phản chiếu và khúc xạ nội dung xung quanh, dùng cho nút, thanh tab và thanh bên nổi trên nội dung.

Liquid Glass khác glassmorphism thế nào?

Glassmorphism là khung nửa trong suốt làm mờ nền phía sau, thường làm bằng CSS. Liquid Glass của Apple thêm khúc xạ ở mép kính, điểm sáng phản chiếu theo chuyển động và tự đổi sáng tối theo nội dung. CSS thông thường tạo được vẻ ngoài, chưa có khúc xạ.

Làm hiệu ứng Liquid Glass bằng CSS thế nào?

Dùng backdrop-filter: blur() và saturate() cho phần làm mờ, nền trắng trong suốt khoảng 18 đến 45%, một radial-gradient trắng làm điểm sáng, viền trắng mảnh và bóng đổ mềm. Công cụ Đổ bóng & kính mờ CSS của ColorME cho mã sẵn ở thẻ Kính mờ.

Figma có hiệu ứng Liquid Glass không?

Theo trang trợ giúp của Figma, Figma có hiệu ứng Glass với các thông số Light angle, Light intensity, Refraction, Depth, Dispersion, Frost và Splay, và UI kit iOS 26 của Apple dùng hiệu ứng này để mô phỏng Liquid Glass. Ngoài ra còn Background blur, cần fill không đặc 100%.

Chữ trên nền kính có khó đọc không?

Có, nhất là trên ảnh sáng. Trong demo của ColorME, chữ trắng trên kính trong chỉ đạt 1.77:1; thêm lớp tối 35% như Apple khuyên thì lên 3.94:1, đủ cho chữ lớn nhưng chưa đủ 4.5:1 cho chữ thường. Hãy đo bằng công cụ Kiểm tra tương phản.

Nguồn đọc ngày 03/11/2026: Apple Newsroom (tiếng Việt), 09/06/2025; Apple Human Interface Guidelines: Materials; Figma: Apply effects to layers; MDN: backdrop-filter. Liquid Glass là tên do Apple đặt; bài không liên kết hay được Apple tài trợ.