Trình tạo CSS cho hiệu ứng kính độ phân giải cao

 (glass3d.dev)
5 điểm bởi GN⁺ 2025-07-04 | 1 bình luận | Chia sẻ qua WhatsApp
  • Cung cấp cách tạo hiệu ứng kính độ phân giải cao bằng mã CSS
  • Áp dụng các bộ lọc thị giác như blur, độ sáng (brightness), độ bão hòa (saturate) cùng đổ bóng nhiều lớp
  • Sử dụng pseudo-element để triển khai hiệu ứng lớp trước/sau và xử lý texture
  • Có thể áp dụng và tùy biến cho nhiều UI chỉ với một lớp CSS ngắn gọn
  • Phù hợp để đưa hiệu ứng kính độ phân giải cao vào các dự án web theo cách nhanh chóng và hiện đại

Giới thiệu

Đoạn mã CSS này được tối ưu để tạo hiệu ứng kính độ phân giải cao trong web UI. So với hiệu ứng glassmorphism truyền thống, nó cho phép thể hiện tinh xảo hơn và có chiều sâu hơn, đồng thời có thể xem kết quả một cách trực quan chỉ bằng việc áp dụng một class CSS duy nhất.

Nội dung chính

  • Lớp .glass3d áp dụng nhiều hiệu ứng bộ lọc thị giác như blur(32px), độ sáng (0.85), độ bão hòa (2.5), đồng thời chèn texture màu và nhiễu
  • Cấu hình box-shadow nhiều tầng để tái hiện cảm giác kính nổi khối chân thực
  • Ở pseudo-element ::before, chồng lớp backdrop-filter, màu sắc và ảnh nền nhiễu để tạo độ trong suốt của nền và chất liệu nổi khối
  • Ở pseudo-element ::after, thêm bóng bên trong (inset) để tạo hiệu ứng như ánh sáng phản chiếu trên bề mặt kính thật
  • Cấu trúc được tổ chức bằng cách tách z-index để các hiệu ứng theo từng layer không xung đột và hiển thị đúng
  • Thông qua selector .glass3d > *, phần nội dung của các phần tử con luôn được hiển thị ở lớp trên cùng

Bối cảnh sử dụng và ưu điểm

  • Có thể triển khai UI hiệu ứng kính hiện đại, hợp xu hướng chỉ với một lớp CSS, không cần thư viện hay phụ thuộc bên ngoài
  • Rất hữu ích cho lập trình viên frontend web vì có thể dễ dàng áp dụng và mở rộng cho design system, thẻ, popup, nút bấm, v.v.
  • Nhờ sử dụng texture từ ảnh pattern thực tế, nhiều tổ hợp màu sắc và hiệu ứng đổ bóng nhiều tầng, cách làm này có ưu thế về chiều sâu và biểu đạt sáng tối so với kỹ thuật glassmorphism hiện có

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-07-04
Ý kiến Hacker News

  • Tôi đã làm một phiên bản áp dụng hiệu ứng khúc xạ thực lên các phần tử của trang bằng JavaScript, rất đáng để xem thử https://real-glass.vercel.app/

  • Hiệu ứng này có giới hạn là chỉ làm mờ các pixel ngay phía sau bề mặt; tôi khuyên nên tham khảo bài viết của Josh Comeau giải thích rất rõ hiện tượng này (https://www.joshwcomeau.com/css/backdrop-filter/#the-issue) và thảo luận trên Hacker News (https://news.ycombinator.com/item?id=42302907). Đây là vấn đề khá quan trọng nếu nền chuyển động, còn nếu nền cố định thì thường không đáng kể

    • Tôi đã đọc bài rất hay của Josh và thử làm theo hướng dẫn, nhưng gặp vấn đề khi xử lý border-radius bằng SVG mask. Nó hoạt động tốt với phần tử được hardcode, nhưng tôi vẫn đang suy nghĩ thêm về cách dùng nó trong cả thư viện component, nơi border-radius thay đổi theo brand/container query
    • Về mặt trực giác, giải pháp của Josh cho cảm giác có gì đó không đúng. Nó giả định các phần tử xung quanh là vật chất tự phát sáng, nhưng tôi không nghĩ đó là đặc tính vật lý cơ bản của "material" trên web. Về cơ bản, tôi mặc định material giống giấy hơn

  • Tôi nghĩ nó được làm khá đẹp, nhưng nếu thiếu hiệu ứng khúc xạ của kính thì sẽ mất đi cảm giác tách lớp thị giác rất mạnh của Liquid Glass. Nếu xem tài nguyên thiết kế của Material, họ nhấn mạnh rằng ứng dụng nên được cấu thành từ các lớp 3D nhất quán và chuyển động. Nhưng khi thực tế triển khai bằng 2D và mọi thứ trộn vào nhau, việc phân biệt từng lớp trở nên rất khó. Nhiều người thường không tìm thấy các nút hành động ở góc khuất. Chuyển động đúng là có giúp phân biệt chrome với nội dung, nhưng về mặt thị giác thì không quá nổi bật. Tôi nghĩ ưu điểm lớn nhất của Liquid Glass là edge distortion (biến dạng ở mép). Nó tạo ra chuyển động phi tuyến mà mắt người có thể bắt được ngay khi nội dung di chuyển, khiến sự phân lớp rõ ràng hơn khi có chuyển động. Yếu tố khúc xạ quan trọng này lại thiếu ở đây. Việc làm edge distortion bằng SVG filter không hề dễ, và rốt cuộc là một công việc khá phức tạp. Có thể xem phần giải thích từng bước tại https://atlaspuplabs.com/blog/liquid-glass-but-in-css/… để thấy độ phức tạp, và tôi cũng tìm thấy bộ sưu tập CodePen Spark tập hợp nhiều thử nghiệm triển khai Liquid Glass khác nhau, cùng một ví dụ tham khảo khá ổn làm bằng SVG hardcode https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • Tôi nghĩ Apple đã tạo ra một moat thông minh với Liquid Glass. Bất kỳ ai cũng có thể làm một phiên bản giá rẻ, nhưng để làm cho nó trông thật thì cực kỳ khó. Chúng ta nhìn kính thật mỗi ngày nên có thể trực giác phân biệt "thật vs giả". Vì vậy các sản phẩm bắt chước sẽ dễ lộ, và Apple có thể giữ được "cảm giác cao cấp"
    • Tôi cũng thấy edge distortion của Liquid Glass thật sự rất đẹp nên dự định sẽ thử làm lại vào một lúc nào đó. Dự án tôi đang làm hiện tập trung vào việc tinh chỉnh chi tiết, chú ý đến tương thích trình duyệt, và triển khai chất liệu mà không dùng 3D thực. Tôi cũng đồng ý rằng hiệu ứng nổi bật hơn khi các lớp di chuyển trên nền cố định. Trang demo tôi đang phát triển hiện có kiểu hiệu ứng này, dù vẫn chưa hoàn thiện. Cảm ơn vì đã chia sẻ tài liệu hay
    • Tôi đồng ý rằng hiệu ứng khúc xạ của kính tạo ra cảm giác tách lớp thị giác, nhưng tôi thấy nó quá rối mắt và trong một số môi trường thì nhìn không đẹp. Đó đúng là hiện tượng vật lý của kính thật, nhưng không nhất thiết phải có. Nó cho tôi cảm giác như đang phóng đại yếu tố tôi ghét nhất ở skeuomorphism. Nhân tiện, tôi thích thiết kế trước iOS 7 hơn

  • Bản thân hiệu ứng thì đẹp, nhưng tôi không thấy nó mang cảm giác kính cho lắm. Khác biệt dễ nhận ra ngay là ánh sáng không phản ứng gì với bevel (mặt vát/bo ở mép). Tôi cũng mong ánh sáng phản xạ trên kính sẽ ảnh hưởng đến chiếu sáng/màu sắc; chỉ blur thôi thì không đủ. Ngoài ra kính còn có thể tạo ra bóng rất đặc trưng, đặc biệt là caustics, nhưng có vẻ Apple cũng chưa đi xa tới mức đó. Bóng hiện tại trông như drop shadow đơn giản nên chỉ làm tăng cảm giác một tấm thẻ phẳng hơn là một vật thể 3D. Điều này lệch khỏi trọng tâm của xu hướng gần đây. Những hiệu ứng như vậy khó mà làm chỉ với CSS; có lẽ chạy bằng shader trên GPU sẽ phù hợp hơn

    • Nếu không làm được bằng CSS thì tôi tò mò phương án sẽ là gì. Tôi cũng không rõ có thể áp dụng hiệu ứng shader GPU lên một div thông thường hay không. Nếu không thể gắn hiệu ứng GPU trực tiếp lên HTML cơ bản thì có lẽ tốt hơn là làm hẳn một engine render mới kiểu canvas tùy biến. Giờ HTML gần như chẳng còn ý nghĩa gì ngoài việc dùng thẻ <p> để truyền chữ, còn phần còn lại đều là quảng cáo, nên có khi nên giữ lại mỗi <p> và bắt đầu lại hoàn toàn với tích hợp GPU tốt hơn

  • Tôi đang sưu tầm các mẫu thiết kế kiểu này https://github.com/swyxio/spark-joy
    Cũng xin gợi ý thêm vài tài liệu liên quan

    • https://ui.glass/generator/ : trình tạo CSS miễn phí theo phong cách glassmorphism
    • frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/
    • mẫu pen glassmorphism codepen, in context
    • ví dụ CSS cho hiệu ứng blur+kết hợp xoay màu 
      .blur-and-rotate {
 border-radius: 20px;
 backdrop-filter: blur(20px) hue-rotate(120deg);
 -webkit-backdrop-filter: hue-rotate(120deg);
}
    • Cảm ơn vì đã thêm dự án này vào danh sách spark-joy
    • Tôi nghĩ Spark Joy là một tài nguyên cực kỳ hay
    • Tôi có tìm thấy một ASCII Font generator, có vẻ chưa có trong spark-joy, thay vào đó xin gợi ý một công cụ tôi hay dùng https://patorjk.com/software/taag/…

  • Tôi nghĩ nếu trên di động có tùy chọn ẩn hoặc thu gọn hộp thì khả năng sử dụng sẽ tốt hơn nhiều. Hiện tại cái hộp chiếm hết màn hình nên khó thấy được hiệu ứng phía sau. Dù vậy vẫn rất thú vị, tôi định sẽ thử lại trên màn hình lớn. Thêm tùy chọn ẩn hộp có lẽ sẽ giúp ích nhiều

  • Có vẻ nó dùng kỹ thuật tương tự phần triển khai glass của tôi https://news.ycombinator.com/item?id=42225481, đặc biệt là cách tận dụng box shadow rất mạnh tay

    • Dự án của bạn thật sự rất đẹp. Thật vui khi thấy không chỉ mình tôi là người dùng nhiều lớp shadow để tạo chiều sâu. Ý tưởng thêm Light Rays đặc biệt gây ấn tượng

  • Hiệu ứng này dùng làm nền web khá tốt

  • Trên điện thoại của tôi, cuộn khá chậm. Không rõ có phải còn hiệu ứng cuộn chậm nào khác được cố ý thêm vào hay đây là tác dụng phụ của hiệu ứng glass

    • Nhận xét thú vị đấy. Trang này không có bất kỳ hiệu ứng cuộn nào cả. Sẽ rất hữu ích nếu bạn có thể chia sẻ thiết bị, trình duyệt và điều kiện mạng thực tế
    • Trên thiết bị M4, RAM 128GB của tôi thì nó chạy ổn

  • Tôi nghĩ nó được làm rất tốt. Lúc nào tôi cũng ngạc nhiên vì đồ họa máy tính không phải là “một cách đặc biệt duy nhất” mà thực ra là “5 lớp mẹo chồng lên nhau”, và hỗ trợ đa trình duyệt cũng là một thách thức lớn. Không rõ bạn có cảm nhận được phần nào tốn tài nguyên nhất không; tôi đoán chắc là backdrop-filter

    • Tôi cũng không nghĩ sẽ cần nhiều mẹo đến vậy. Phần nặng nhất là xử lý blur của backdrop-filter. Giá trị blur càng cao thì càng phải tham chiếu nhiều thông tin pixel xung quanh để render. Một phần khác cũng tốn tài nguyên là việc cập nhật diện mạo kính theo thời gian thực khi cuộn hoặc khi nền video thay đổi
    • Đôi khi ngay cả khi chỉ muốn căn giữa một thứ gì đó, bạn cũng phải dùng tới “5 lớp mẹo”