Công cụ tạo Glassmorphism CSS

Bắt nguồn từ macOS Big Sur, iOS và Windows 11 Fluent Design, Glassmorphism đã trở thành chuẩn mực cho các ứng dụng web hiện đại, cao cấp.

Triết lý cốt lõi dựa vào "trục Z". Bằng cách làm lớp trên bán trong suốt và làm mờ mạnh các lớp màu sắc bên dưới, các nhà thiết kế tạo ra phân cấp trực quan mà không cần dùng bóng đổ nguyên khối. Điều này giúp người dùng nhận biết bối cảnh đang diễn ra "phía sau" cửa sổ hiện tại.

Để đạt hiệu ứng Glassmorphism, các nhà phát triển phụ thuộc hoàn toàn vào quy tắc CSS backdrop-filter. Khi bạn thiết lập nền bán trong suốt (ví dụ: background: rgba(255, 255, 255, 0.2);) và áp dụng backdrop-filter: blur(10px);, trình duyệt sẽ lấy các điểm ảnh ngay phía sau, tính toán làm mờ và hiển thị bên trong phần tử của bạn.

Do trình duyệt phải tính toán lại điểm ảnh liên tục khi cuộn, đây là thuộc tính tăng tốc phần cứng. Công cụ của Utiliome tính toán tức thì các thông số này để bạn xem trước tác động hiệu năng thời gian thực.

Viết CSS tùy chỉnh rất tốt để học hỏi, nhưng các nhà phát triển hiện đại thường ưu tiên các framework tiện ích như Tailwind.

Để dựng thẻ kính trong Tailwind, bạn cần 3 lớp thiết yếu:

• Độ mờ: Dùng backdrop-blur-md hoặc backdrop-blur-lg để làm mờ nền.
• Màu nền: Dùng bg-white/20 (cho chế độ sáng) hoặc bg-slate-900/40 (cho chế độ tối) để tạo sự hiện diện thực tế cho kính.
• Đường viền: Kính thực tế phản chiếu ánh sáng ở viền. Giả lập điều này bằng viền 1px mỏng với border border-white/20.

Công cụ của Utiliome cung cấp nút chuyển đổi để xuất mã CSS chuẩn hoặc chuỗi class Tailwind được định dạng hoàn hảo.

Sai lầm phổ biến của các lập trình viên mới khi làm glassmorphism là bỏ qua thiết bị Apple. Trong khi Chrome và Firefox hỗ trợ thuộc tính backdrop-filter chuẩn, Safari (đặc biệt là các bản iOS cũ) bắt buộc phải có tiền tố nhà cung cấp.

Nếu bạn không thêm -webkit-backdrop-filter: blur(10px);, người dùng Apple sẽ chỉ thấy một thẻ div trong suốt khó hiểu, khiến chữ hoàn toàn không thể đọc được trên nền.

Công cụ CSS của Utiliome tự động thêm các tiền tố WebKit cần thiết vào mã đầu ra, đảm bảo thiết kế của bạn hiển thị đồng nhất trên mọi hệ điều hành.

Điểm trừ lớn nhất của xu hướng glassmorphism là khả năng truy cập kém. Nếu hình nền phía sau chuyển từ xanh đậm sang vàng sáng, chữ màu trắng có thể lập tức trở nên vô hình.

Để khắc phục, bạn cần áp dụng lớp màu nền đủ đục. Ví dụ nếu dùng chữ trắng, hãy đảm bảo màu nền kính đạt mức như rgba(0, 0, 0, 0.6). Điều này đảm bảo dù hình nền phía sau có thay đổi ra sao, chữ vẫn duy trì độ tương phản tối thiểu 4.5:1 theo quy định.

Não người cần các tín hiệu ánh sáng để nhận biết chiều sâu. Nếu chỉ làm mờ nền, giao diện có thể trông rất 'flatted' (phẳng).

Để kính nổi bật, bạn cần nâng nó lên trên trục Z. Công cụ của Utiliome cho phép tùy chỉnh box-shadow tinh tế. Giữ độ đục của bóng cực thấp (khoảng 10%) nhưng bán kính mờ cao (32px) sẽ tạo hiệu ứng đổ bóng môi trường mềm mại, tách kính khỏi nền rực rỡ bên dưới.