Glassmorphism Card

This card component showcases the popular “Glassmorphism” (frosted glass) effect, a staple of modern web design. By combining a background blur (backdrop-filter), a semi-transparent background color, and a subtle border, it delivers a highly refined UI with an elevated sense of depth.

Glassmorphism

This is a glassmorphism demo. The background beautifully shows through, bringing an impressive visual effect where the content seems to float in space.

Code

Copy the following code and integrate it into your project.

<div class="glass-container">
  <div class="glass-card">
    <h3 class="glass-title">Glassmorphism</h3>
    <p class="glass-text">
      This is a glassmorphism demo. The background beautifully shows through, bringing an impressive visual effect where the content seems to float in space.
    </p>
  </div>
</div>
/* Background (for demo) */
.glass-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}

/* Glassmorphism card body */
.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);
}

Features