Glassmorphism Card

<div class="glass-card">

  <div class="glass-card-icon">✦</div>

  <h2>Creative Workspace</h2>

  <p>
    A clean glassmorphism card for dashboards, portfolios
    and modern interface sections.
  </p>

  <div class="glass-card-meta">
    <span>12 Projects</span>
    <span>24 Files</span>
  </div>

  <a href="#" class="glass-card-link">
    Explore
    <span>→</span>
  </a>

</div>

.glass-card{
  width:100%;
  max-width:360px;
  padding:30px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  color:#ffffff;
  box-shadow:
    0 20px 45px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.glass-card:hover{
  transform:translateY(-6px);
  border-color:rgba(34,211,238,.45);
  box-shadow:
    0 26px 55px rgba(0,0,0,.35),
    0 0 30px rgba(139,92,246,.15);
}

.glass-card-icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  border-radius:14px;
  background:linear-gradient(
    135deg,
    rgba(34,211,238,.25),
    rgba(139,92,246,.30)
  );
  color:#ffffff;
  font-size:22px;
}

.glass-card h2{
  margin:0 0 12px;
  color:#ffffff;
  font-size:24px;
}

.glass-card p{
  margin:0 0 22px;
  color:#b5c3d6;
  font-size:14px;
  line-height:1.7;
}

.glass-card-meta{
  display:flex;
  gap:16px;
  margin-bottom:22px;
  color:#8fa4bd;
  font-size:12px;
}

.glass-card-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#22d3ee;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
}

.glass-card-link span{
  transition:transform .25s ease;
}

.glass-card:hover .glass-card-link span{
  transform:translateX(5px);
}

How This Glassmorphism Card Works

The Glassmorphism Card uses a translucent background, background blur, soft borders, and subtle shadows to create a glass-like interface panel. The published component uses HTML and CSS only, so the visual effect and hover interaction do not require JavaScript.

The main .glass-card container uses width: 100% with max-width: 360px, allowing it to shrink inside smaller layouts while keeping a controlled maximum size. It also has 30px of padding and a 20px border radius, giving the content enough space while maintaining a compact shape.

The glass effect starts with background: rgba(255,255,255,.06). Because this background is only slightly opaque, content or colors behind the card can remain partially visible. A 1px border using rgba(255,255,255,.16) adds a brighter edge that helps define the card against its background.

The key glassmorphism property is backdrop-filter: blur(18px). Instead of blurring the card’s own content, this property blurs whatever appears behind the translucent card. The stylesheet also includes -webkit-backdrop-filter: blur(18px) for browser compatibility where the prefixed version is needed. For more detail about how this effect works, see the MDN backdrop-filter documentation.

The card also uses two shadows. The first, 0 20px 45px rgba(0,0,0,.30), creates depth below the component. The second uses inset 0 1px 0 rgba(255,255,255,.08) to add a faint highlight inside the top edge. Together with the translucent border, this helps reinforce the glass appearance.

Hovering over the card applies transform: translateY(-6px). The border becomes more cyan with rgba(34,211,238,.45), while the shadow changes to a deeper outer shadow and a faint purple glow. The transform, border color, and box shadow all use .3s ease transitions, so the card moves smoothly between its normal and hovered states.

At the top of the content, .glass-card-icon creates a 52px square containing the ✦ symbol. Flexbox centers the icon vertically and horizontally, while a 14px border radius softens its corners. Its background uses a semi-transparent gradient from cyan to purple, which works with the glass styling without creating a fully opaque block.

The Creative Workspace heading uses a 24px font size, followed by a description styled at 14px with a 1.7 line height. The muted #b5c3d6 paragraph color keeps the supporting text less prominent than the heading.

The .glass-card-meta section uses Flexbox to display 12 Projects and 24 Files on the same row with a 16px gap. The smaller 12px text and muted #8fa4bd color make this metadata secondary information.

At the bottom, the Explore link uses inline-flex to align its text with the arrow. The arrow has a .25s ease transform transition. When the entire card is hovered, .glass-card:hover .glass-card-link span applies translateX(5px), moving the arrow slightly to the right.

Customizing This Glassmorphism Card

The component can be adapted by changing its existing content, transparency, blur, colors, dimensions, and interaction values.

• Change max-width: 360px if you need a wider or narrower glass panel.
• Adjust rgba(255,255,255,.06) to make the card background more or less transparent.
• Increase or decrease blur(18px) to control the strength of the background blur.
• Change the 20px card radius or 14px icon radius for different corner styles.
• Replace the Creative Workspace title, description, project count, file count, and Explore text.
• Replace the ✦ character with another icon or symbol.
• Modify the cyan #22d3ee and purple #8b5cf6 values used in the accent styling.
• Adjust translateY(-6px) or the .3s transition to change the card’s hover response.

Where to Use This Glassmorphism Card

The translucent layout works best when the card appears over a background that provides enough color or detail for the blur effect to be visible.

• Dashboard overview panels.
• Portfolio project summaries.
• Creative workspace interfaces.
• App feature sections.
• File or project management dashboards.
• Profile and account panels.
• Landing page feature cards.

Because this component has no JavaScript dependency, several cards can be placed inside a Grid or Flexbox layout without adding interaction logic. If you need a different card style with stronger dimensional hover behavior, the 3D Hover Monster Cards component is a related option.

Frequently Asked Questions

Does the Glassmorphism Card use JavaScript?

No. The published component contains only HTML and CSS. Its glass effect, card movement, border change, shadow change, and arrow animation are all handled through CSS.

What creates the glassmorphism effect?

The effect comes mainly from the semi-transparent rgba(255,255,255,.06) background and backdrop-filter: blur(18px). A translucent border and layered shadows further define the glass-like surface.

Why is -webkit-backdrop-filter included?

The prefixed property is included alongside the standard backdrop-filter declaration to support browser environments where the WebKit-prefixed version is useful.

How does the Explore arrow animate?

The arrow is inside a <span> with a .25s ease transform transition. When the card is hovered, CSS applies translateX(5px) to that span, moving the arrow horizontally.

The Glassmorphism Card keeps the implementation simple while combining translucency, backdrop blur, layered shadows, and lightweight CSS hover interactions in a reusable card layout.