Card Glassmorphism

Hiệu ứng “Glassmorphism” đang là một trong những xu hướng thiết kế web hiện đại được ưa chuộng nhất. Bằng cách tận dụng thuộc tính backdrop-filter kết hợp với màu nền bán trong suốt và đường viền mỏng, bạn có thể tạo ra một UI component tinh tế, có chiều sâu và mang lại cảm giác cao cấp.

Glassmorphism

Đây là bản demo của glassmorphism. Nó mang lại hiệu ứng thị giác ấn tượng, nơi hình nền hiển thị trong suốt tuyệt đẹp và nội dung như đang lơ lửng trong không gian.

Mã nguồn (Source Code)

Bạn có thể copy đoạn code dưới đây và tích hợp trực tiếp vào dự án của mình.

<div class="glass-container">
  <div class="glass-card">
    <h3 class="glass-title">Glassmorphism</h3>
    <p class="glass-text">
      Đây là bản demo của glassmorphism. Nó mang lại hiệu ứng thị giác ấn tượng, nơi hình nền hiển thị trong suốt tuyệt đẹp và nội dung như đang lơ lửng trong không gian.
    </p>
  </div>
</div>
/* Nền (demo) */
.glass-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}

/* Card Glassmorphism chính */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 2.5rem;
  max-width: 360px;
}

.glass-title {
  margin: 0 0 1rem 0;
  font-size: 1.75rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.glass-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

Đặc điểm nổi bật