Tutorial CSS glass card｜Từng bước làm kính mờ với backdrop-filter【2026】

Bạn mở Figma thấy card “frosted glass”, mở DevTools rồi… không biết bắt đầu property nào. Copy blur(40px) từ CodePen thì chữ trắng trên mây sáng không đọc được. Tutorial này đi từ HTML → CSS từng lớp → chỉnh số → gắn vào layout, dành cho sinh viên và freelancer frontend ở VN cần ra UI demo / landing nhỏ trong một buổi.

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

• Dựng cấu trúc HTML tối thiểu cho một glass card
• Hiểu 4 thuộc tính lõi và thứ tự chỉnh
• Có bảng giá trị khởi đầu (blur / alpha / radius) theo loại UI
• Tránh 5 lỗi copy-paste phổ biến
• Dùng generator trình duyệt để xuất CSS sạch

Bước 0 — Chuẩn bị “thứ gì đó phía sau”

backdrop-filter chỉ làm mờ nội dung phía sau phần tử. Nếu card nằm trên nền trắng phẳng, bạn chỉ thấy panel bán trong suốt — không có cảm giác kính.

<section class="hero">
  <!-- Nền: gradient hoặc ảnh — bắt buộc có -->
  <div class="hero__bg" aria-hidden="true"></div>

  <article class="glass-card">
    <h2>Gói Pro</h2>
    <p>199.000đ / tháng — dùng thử 7 ngày.</p>
    <button type="button">Đăng ký</button>
  </article>
</section>

.hero {
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
  /* hoặc: background-image: url(...); background-size: cover; */
}

.glass-card {
  position: relative; /* nổi trên bg */
  z-index: 1;
  width: min(360px, 92vw);
  padding: 1.5rem 1.75rem;
}

Checklist bước 0: có nền đa màu hoặc ảnh; card position + z-index rõ; không để card cùng màu nền phẳng.

Bước 1 — Bốn thuộc tính lõi của kính

.glass-card {
  /* 1) Nền bán trong suốt — alpha quyết định “độ kính” */
  background: rgba(255, 255, 255, 0.2);

  /* 2) Làm mờ những gì Ở PHÍA SAU card */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* 3) Viền sáng mỏng — tách cạnh khỏi nền rối */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 4) Bo góc — glass thường 12–20px */
  border-radius: 16px;
}

Đừng nhầm: filter: blur(12px) làm mờ chính phần tử và con của nó. Muốn kính mờ nền phía sau → chỉ backdrop-filter.

Bước 2 — Bảng giá trị khởi đầu (copy rồi tinh chỉnh)

Quy tắc chỉnh nhanh:

1. Chữ khó đọc → tăng alpha trước (0.05 mỗi lần), giảm blur sau.
2. Không thấy “kính” → giảm alpha hoặc tăng blur 2–4px, đổi nền sang gradient mạnh hơn.
3. Cạnh không rõ → tăng border alpha lên ~0.35.

Trên Glassmorphism có slider: Blur (0–50px), độ trong suốt nền (0–1), độ trong suốt viền, Radius — xem preview rồi Sao chép. Mặc định tool thường quanh blur 12 / opacity 0.2 / border 0.3 / radius 12 — gần bảng pricing ở trên.

Bước 3 — Hoàn thiện card (typography + shadow nhẹ)

Kính không thay thế hierarchy chữ. Thêm shadow mềm để card “nổi” khỏi hero:

.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);
  color: #0f172a;
}

.glass-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.glass-card p {
  margin: 0 0 1.25rem;
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.85);
}

.glass-card button {
  border: 0;
  border-radius: 10px;
  padding: 0.65rem 1.1rem;
  font-weight: 600;
  background: #4f46e5;
  color: #fff;
  cursor: pointer;
}

Dark glass trên ảnh sáng (hero mây / biển):

.glass-card--dark {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f8fafc;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

.glass-card--dark p {
  color: rgba(248, 250, 252, 0.85);
}

Bước 4 — Gắn vào layout thật (Flex / Grid)

.pricing-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding: 2rem 1rem;
}

/* Chỉ 1–2 card kính trên một viewport — đủ “wow”, dễ đọc */
.pricing-grid .glass-card:nth-child(2) {
  /* card nổi bật: alpha hơi cao hơn để CTA rõ */
  background: rgba(255, 255, 255, 0.32);
}

Freelance landing 3 gói: thường chỉ gói giữa dùng kính đậm hơn, hai gói bên flat/solid — hierarchy rõ, GPU nhẹ hơn blur cả ba.

Bước 5 — Quy trình với Kawa (5 phút)

1. Mở Glassmorphism CSS Generator (chạy trên trình duyệt, không cần đăng ký).
2. Kéo Blur đến ~12; Opacity nền ~0.2; Border ~0.3; Radius 16.
3. Nhìn preview trên gradient mẫu — nếu chữ trong preview khó đọc, tăng opacity nền trước.
4. Sao chép khối CSS (backdrop-filter, -webkit-, background, border, border-radius).
5. Dán vào class .glass-card; thêm padding, color, box-shadow như bước 3.
6. Đổi hero__bg sang ảnh/gradient thật của dự án và chỉnh lại alpha một lần nữa.

Công cụ xuất đúng các property generator hỗ trợ — không bịa thêm filter phức tạp. Phần typography / layout bạn tự viết trong stylesheet.

5 lỗi thường gặp (và cách sửa)

Case study ngắn: Sinh viên làm portfolio Astro — hero có ảnh thành phố. Card giới thiệu dùng blur 28px + alpha 0.12. Trên laptop đẹp; trên Android 4GB chữ “liên hệ” gần như biến mất. Sửa: alpha 0.28, blur 12px, border 0.35 → đọc được, vẫn còn cảm giác kính.

Checklist trước khi merge PR

• Có nền phía sau đủ “có gì để blur”
• Dùng backdrop-filter (+ -webkit-), không dùng filter cho kính
• Chữ đọc được trên ảnh sáng và tối (hoặc có variant dark)
• Blur card ≤ ~16px trừ khi đã test mobile
• Border mỏng + radius khớp design system
• CSS lấy từ generator rồi chỉnh trên ảnh thật — không chốt số trên nền giả đơn sắc

Khi nào dừng tutorial này và đọc thêm

Bạn đã có card kính chạy được. Nếu đang ship landing production (fallback @supports, contrast WCAG, giới hạn GPU mobile), đọc bài Glassmorphism CSS trên landing. Nếu cần quyết định có nên dùng kính trên UI này không, xem Glassmorphism là gì / khi nào dùng.

Liên kết liên quan

• Glassmorphism CSS Generator
• Tạo Box Shadow
• Tạo Gradient
• Danh sách công cụ