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

Elegant Transparency and Blur: Simulates a realistic frosted glass texture using backdrop-filter: blur().
Enhanced Depth: Creates an illusion of floating above the background through a delicate interplay of a semi-transparent border and a soft drop shadow.
High Versatility: Automatically adapts to and harmonizes beautifully with diverse backgrounds, whether they are vibrant gradients or complex images.