Phong cách Glassmorphism là gì? Cách tạo hiệu ứng Kính mờ sang trọng cho Website

Nếu bạn muốn trang web của mình trông giống các hệ điều hành cao cấp nhất như macOS hay iOS của Apple, phong cách thiết kế Glassmorphism (Hiệu ứng kính mờ xuyên thấu) là sự lựa chọn hoàn hảo. Phong cách này mang lại vẻ đẹp hiện đại, đa chiều và vô cùng sang trọng.

1. 3 Đặc trưng cốt lõi của phong cách Glassmorphism

• Độ trong suốt xuyên thấu (Translucency): Sử dụng màu nền trong suốt mờ ảo để hiển thị lờ mờ hình ảnh phía sau.
• Độ mờ đục nhòe (Backdrop Blur): Làm mờ hình ảnh nằm phía sau thẻ để tạo cảm giác lớp kính dày cao cấp.
• Viền phản chiếu ánh sáng (Subtle Light Border): Đường viền mảnh màu trắng trong suốt bao quanh thẻ tạo cảm giác bề mặt kính thật.

2. Hướng dẫn tạo hiệu ứng Glassmorphism bằng Vanilla CSS

Chỉ với 4 dòng CSS chuẩn mực:

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

3. Mẹo phối màu Nền (Background) nâng tầm Glassmorphism

Hiệu ứng kính mờ chỉ thực sự tỏa sáng khi nằm trên một hình nền có các khối màu sắc rực rỡ (Gradient Blobs) hoặc các khối hình học mờ chuyển động phía sau. Đọc thêm bài viết sự khác nhau giữa UI và UX.

Kết luận

Áp dụng phong cách Glassmorphism là giải pháp tuyệt vời để tạo nét chấm phá khác biệt cho website doanh nghiệp. Uwmee Software thiết kế giao diện Glassmorphism đỉnh cao nâng tầm vị thế thương hiệu của bạn. Đọc thêm bài viết biến website thành PWA.