Glass Surface Summary Card

A glass surface summary card built with pure HTML and CSS that displays key information using a frosted glass–style surface, adding visual depth and clarity without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where summarized information needs visual separation, such as dashboards, overview panels, profile summaries, or modern UI sections using glassmorphism design.

Implementation

The glass surface effect is created using CSS backdrop-filter, transparency, and subtle borders, allowing content to appear layered and readable while keeping the component lightweight and reusable.

HTML

<div class="card-glass">
  <strong class="card-glass__title">Active Users</strong>
  <span class="card-glass__value">1,284</span>
</div>

<div class="card-glass">
  <strong class="card-glass__title">Active Users</strong>
  <span class="card-glass__value">1,284</span>
</div>

CSS

.card-glass {
  width: 200px;
  padding: 0.75rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.14);
  display: grid;
  gap: 0.25rem;
  transition: transform 160ms ease;
}

.card-glass:hover {
  transform: translateY(-2px);
}

.card-glass__title {
  font-size: 12px;
  color: #374151;
}

.card-glass__value {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

@media (prefers-color-scheme: dark) {
  .card-glass {
    background: rgba(2,6,23,0.7);
  }
  .card-glass__title {
    color: #9ca3af;
  }
  .card-glass__value {
    color: #e5e7eb;
  }
}

.card-glass {
  width: 200px;
  padding: 0.75rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.14);
  display: grid;
  gap: 0.25rem;
  transition: transform 160ms ease;
}

.card-glass:hover {
  transform: translateY(-2px);
}

.card-glass__title {
  font-size: 12px;
  color: #374151;
}

.card-glass__value {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

@media (prefers-color-scheme: dark) {
  .card-glass {
    background: rgba(2,6,23,0.7);
  }
  .card-glass__title {
    color: #9ca3af;
  }
  .card-glass__value {
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses glassmorphism-style surface effects
• Enhances separation between background and content
• Lightweight and visually modern
• Works in modern browsers

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.