Glassmorphism CSS | backdrop-filter trên landing, fallback và contrast chữ

Designer gửi mock “frosted glass” kiểu Apple. Dev copy backdrop-filter: blur(40px) lên hero full-bleed. Trên iPhone cũ / Android 4GB phổ biến ở VN: scroll như slide trình chiếu. Trên desktop: chữ trắng trên mây sáng — đẹp mock, fail thật.

Bài này tập trung card kính trên landing: support, fallback, perf, contrast — không phải lịch sử xu hướng UI.

Bài viết này giúp bạn

• Viết CSS glass đúng lớp (không nhầm filter)
• Thêm fallback khi không có backdrop-filter
• Giữ chữ đọc được trên blur
• Giới hạn cost GPU mobile
• Dùng generator rồi tinh chỉnh cho ảnh nền thật

CSS tối thiểu

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

/* Dark panel trên ảnh sáng */
.glass-card--dark {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

Ba thành phần:

1. Alpha nền — quá thấp = chữ chết; quá cao = hết “kính”
2. Blur — 8–16px thường đủ card; 30px+ cho hero lớn dễ nặng
3. Border sáng mỏng — tách cạnh khỏi nền rối

filter: blur() trên chính card sẽ làm mờ chữ bên trong — sai mục tiêu. Phải là backdrop-filter.

Kéo blur/opacity trên tool Glassmorphism, copy CSS, rồi dán lên ảnh hero thật — slider trên nền caro không đủ để chốt contrast.

Support và fallback

Hỗ trợ chính đã ổn năm 2026, nhưng máy/WebView cũ (in-app Zalo, Facebook) đôi khi hành xử khác. Best practice:

.glass-card {
  /* Fallback: đọc được khi không blur */
  background: rgba(255, 255, 255, 0.92);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

Không có blur → card gần đặc, vẫn sạch. Có blur → kính. Đừng để fallback alpha 0.15 — chữ biến mất trên mọi engine.

Contrast chữ trên nền blur

Blur trộn vùng sáng/tối phía sau → độ tương phản thay đổi theo scroll (parallax) hoặc carousel.

Gợi ý thực dụng landing:

• Headline trên glass: tối thiểu tương phản cảm nhận ~ lớn; body ≥ 16px
• Có thể text-shadow: 0 1px 2px rgba(0,0,0,0.25) rất nhẹ — không thay nền đủ đục
• CTA button trên glass: nền button đặc (không kính) để click rõ

Hiệu năng mobile (bối cảnh VN)

Nhiều user xem landing trên 4G + máy tầm trung. backdrop-filter buộc compositor làm việc mỗi frame khi layer kính chồng nội dung chuyển động.

Giảm risk:

1. Chỉ glass cho pricing card / navbar — không blur 100vh
2. @media (max-width: 768px) { backdrop-filter: blur(6px); } hoặc tắt kính → nền đặc
3. Tránh blur(40px) + nhiều card trong grid
4. will-change không phải phép màu — đừng thêm bừa
5. Test Chrome remote trên máy thật, không chỉ DevTools throttling CPU

Nếu Lighthouse/INP xấu và glass nằm trên carousel autoplay — tắt autoplay hoặc bỏ blur trước khi tối ưu micro khác.

Case study

Hero agency — đẹp desktop, giật mobile

Blur 24px full-width panel + video nền. Fix: video poster tĩnh trên mobile, panel alpha 0.85 không blur dưới 768px. Conversion không đổi; bounce giảm vì trang cuộn được.

Card giá SaaS

Ba cột glass trên gradient tím. Cột giữa chữ gần không đọc khi gradient sáng. Fix: background: rgba(15,23,42,0.55) + border sáng; CTA solid. Vẫn “glass”, contrast đạt.

Checklist ship

• Dùng backdrop-filter, không filter lên chữ
• Có -webkit- và fallback @supports
• Preview trên ảnh hero sáng + tối
• Contrast CTA/headline ổn
• ≤ 2 vùng kính lớn / trang
• Mobile: blur giảm hoặc tắt
• Không phụ thuộc kính để phân hierarchy thông tin quan trọng

Liên quan

• Glassmorphism generator — blur, opacity, border, copy CSS
• Box shadow — chiều sâu khi không dùng kính
• Kiểm tra tương phản màu — đo chữ trên nền gần đúng với glass

Bookmark lý do: recipe glass + fallback + contrast + giới hạn perf mobile — đủ để ship landing không chỉ đẹp trên mock.