Open demo

CSS code

HTML 
<div class="gc-grid">
  <article class="gc-card">
    <div class="gc-top"><span class="gc-chip">Storage</span><span class="gc-num">72%</span></div>
    <h2 class="gc-title">Media library</h2>
    <p class="gc-text">Photos and video previews are using most of your plan. Old drafts can be archived automatically.</p>
    <div class="gc-bar gc-b1" role="meter" aria-label="Storage used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72" aria-valuetext="72%, 144 GB of 200 GB"><i></i></div>
    <div class="gc-foot"><span>144 GB of 200 GB</span><span>56 GB free</span></div>
  </article>
  <article class="gc-card">
    <div class="gc-top"><span class="gc-chip">Bandwidth</span><span class="gc-num">41%</span></div>
    <h2 class="gc-title">Monthly transfer</h2>
    <p class="gc-text">Traffic is well within limits this cycle. Peak day so far was launch Tuesday.</p>
    <div class="gc-bar gc-b2" role="meter" aria-label="Bandwidth used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="41" aria-valuetext="41%, 410 GB of 1 TB"><i></i></div>
    <div class="gc-foot"><span>410 GB of 1 TB</span><span>Resets in 12 days</span></div>
  </article>
</div>
CSS 
/* Glassmorphism usage cards: a translucent panel with backdrop-filter blur, a figure, a note and a usage meter.
   Place them over a colourful background, otherwise there is nothing to blur. */
.gc-grid,.gc-grid *,.gc-grid *::before,.gc-grid *::after{box-sizing:border-box}
.gc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.gc-card{position:relative;width:300px;border-radius:20px;padding:28px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:#eef1fb;box-shadow:0 22px 50px rgba(0,0,0,.35);transition:transform .18s,background .18s}
.gc-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.12)}
.gc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.gc-chip{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.14)}
.gc-num{font-size:2rem;font-weight:800;letter-spacing:-.03em}
.gc-title{font-size:1.05rem;margin:0 0 8px}
.gc-text{font-size:.85rem;line-height:1.6;color:#c3cae4;margin:0 0 20px}
.gc-bar{height:7px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin-bottom:8px}
.gc-bar i{display:block;height:100%;border-radius:999px}
.gc-b1 i{width:72%;background:linear-gradient(90deg,#f472b6,#fb7185)}
.gc-b2 i{width:41%;background:linear-gradient(90deg,#38bdf8,#22d3ee)}
.gc-foot{display:flex;justify-content:space-between;font-size:.75rem;color:#aab3d6}
@media (prefers-reduced-motion:reduce){.gc-card{transition:none}.gc-card:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="row row-cols-auto justify-content-center g-4">
  <div class="col">
    <article class="card h-100 gc-card">
      <div class="card-body">
        <div class="gc-top d-flex justify-content-between align-items-center"><span class="badge rounded-pill gc-chip">Storage</span><span class="gc-num">72%</span></div>
        <h2 class="card-title gc-title">Media library</h2>
        <p class="card-text gc-text">Photos and video previews are using most of your plan. Old drafts can be archived automatically.</p>
        <div class="progress gc-bar gc-b1" role="meter" aria-label="Storage used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72" aria-valuetext="72%, 144 GB of 200 GB"><div class="progress-bar" style="width:72%"></div></div>
        <div class="gc-foot d-flex justify-content-between"><span>144 GB of 200 GB</span><span>56 GB free</span></div>
      </div>
    </article>
  </div>
  <div class="col">
    <article class="card h-100 gc-card">
      <div class="card-body">
        <div class="gc-top d-flex justify-content-between align-items-center"><span class="badge rounded-pill gc-chip">Bandwidth</span><span class="gc-num">41%</span></div>
        <h2 class="card-title gc-title">Monthly transfer</h2>
        <p class="card-text gc-text">Traffic is well within limits this cycle. Peak day so far was launch Tuesday.</p>
        <div class="progress gc-bar gc-b2" role="meter" aria-label="Bandwidth used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="41" aria-valuetext="41%, 410 GB of 1 TB"><div class="progress-bar" style="width:41%"></div></div>
        <div class="gc-foot d-flex justify-content-between"><span>410 GB of 1 TB</span><span>Resets in 12 days</span></div>
      </div>
    </article>
  </div>
</div>
CSS 
/* Bootstrap .card + .badge + .progress made translucent through --bs-card-* and --bs-progress-* variables,
   with backdrop-filter for the frosted blur. Place over a colourful background. */
.gc-card{--bs-card-bg:rgba(255,255,255,.08);--bs-card-border-color:rgba(255,255,255,.18);--bs-card-border-radius:20px;--bs-card-spacer-x:28px;--bs-card-spacer-y:28px;--bs-card-color:#eef1fb;
  width:300px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 22px 50px rgba(0,0,0,.35);transition:transform .18s,background-color .18s}
.gc-card:hover{transform:translateY(-5px);--bs-card-bg:rgba(255,255,255,.12)}
.gc-top{margin-bottom:22px}
.gc-chip{--bs-badge-font-size:.7rem;--bs-badge-font-weight:700;--bs-badge-padding-x:11px;--bs-badge-padding-y:5px;background:rgba(255,255,255,.14);letter-spacing:.08em;text-transform:uppercase}
.gc-num{font-size:2rem;font-weight:800;letter-spacing:-.03em}
.gc-title{font-size:1.05rem;font-weight:700;line-height:normal;margin:0 0 8px}
.gc-text{font-size:.85rem;line-height:1.6;color:#c3cae4;margin:0 0 20px}
.gc-bar{--bs-progress-height:7px;--bs-progress-bg:rgba(255,255,255,.14);--bs-progress-border-radius:999px;margin-bottom:8px}
.gc-bar .progress-bar{border-radius:999px}
.gc-b1 .progress-bar{background:linear-gradient(90deg,#f472b6,#fb7185)}
.gc-b2 .progress-bar{background:linear-gradient(90deg,#38bdf8,#22d3ee)}
.gc-foot{font-size:.75rem;color:#aab3d6}
@media (prefers-reduced-motion:reduce){.gc-card{transition:none}.gc-card:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="flex flex-wrap justify-center gap-7">
  <article class="relative w-[300px] rounded-[20px] border border-white/18 bg-white/8 p-7 text-[#eef1fb] shadow-[0_22px_50px_rgba(0,0,0,.35)] backdrop-blur-[18px] transition-[translate,background-color] duration-[180ms] hover:-translate-y-[5px] hover:bg-white/12 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
    <div class="mb-[22px] flex items-center justify-between"><span class="rounded-full bg-white/14 px-[11px] py-[5px] text-[.7rem] font-bold tracking-[.08em] uppercase">Storage</span><span class="text-[2rem] font-extrabold tracking-[-.03em]">72%</span></div>
    <h2 class="mb-2 text-[1.05rem] font-bold">Media library</h2>
    <p class="mb-5 text-[.85rem] leading-[1.6] text-[#c3cae4]">Photos and video previews are using most of your plan. Old drafts can be archived automatically.</p>
    <div role="meter" aria-label="Storage used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72" aria-valuetext="72%, 144 GB of 200 GB" class="mb-2 h-[7px] overflow-hidden rounded-full bg-white/14"><i class="block h-full w-[72%] rounded-full bg-linear-to-r from-[#f472b6] to-[#fb7185]"></i></div>
    <div class="flex justify-between text-[.75rem] text-[#aab3d6]"><span>144 GB of 200 GB</span><span>56 GB free</span></div>
  </article>
  <article class="relative w-[300px] rounded-[20px] border border-white/18 bg-white/8 p-7 text-[#eef1fb] shadow-[0_22px_50px_rgba(0,0,0,.35)] backdrop-blur-[18px] transition-[translate,background-color] duration-[180ms] hover:-translate-y-[5px] hover:bg-white/12 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
    <div class="mb-[22px] flex items-center justify-between"><span class="rounded-full bg-white/14 px-[11px] py-[5px] text-[.7rem] font-bold tracking-[.08em] uppercase">Bandwidth</span><span class="text-[2rem] font-extrabold tracking-[-.03em]">41%</span></div>
    <h2 class="mb-2 text-[1.05rem] font-bold">Monthly transfer</h2>
    <p class="mb-5 text-[.85rem] leading-[1.6] text-[#c3cae4]">Traffic is well within limits this cycle. Peak day so far was launch Tuesday.</p>
    <div role="meter" aria-label="Bandwidth used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="41" aria-valuetext="41%, 410 GB of 1 TB" class="mb-2 h-[7px] overflow-hidden rounded-full bg-white/14"><i class="block h-full w-[41%] rounded-full bg-linear-to-r from-[#38bdf8] to-[#22d3ee]"></i></div>
    <div class="flex justify-between text-[.75rem] text-[#aab3d6]"><span>410 GB of 1 TB</span><span>Resets in 12 days</span></div>
  </article>
</div>

About this set

Frosted-glass cards for account usage: a storage card at 72 percent and a bandwidth card at 41 percent. Each has a category pill, a large percentage, a heading, a short explanation, a thin gradient usage bar and a footer with the amount used and what is left. The glass look is a white background at eight percent opacity, a faint white border, a large soft shadow and backdrop-filter: blur(18px), which blurs whatever sits behind the card. That means the effect needs something colourful underneath; the demo page uses a deep purple gradient with two blurred colour orbs, which are page decoration and not part of the snippet. The usage bar is a div with role=”meter”, a label, min, max and current value, and an aria-valuetext such as 72%, 144 GB of 200 GB, so assistive technology hears the same figures the footer shows. Use these on dashboards, billing pages or hero sections over imagery. Cards lift slightly on hover. The Bootstrap version uses .card, .badge and .progress recoloured through –bs-card-* and –bs-progress-* variables.

What’s included

  • Frosted glass panel using backdrop-filter blur
  • Usage bar exposed as a meter with label and value text
  • Category pill, large percentage and used and remaining figures
  • Pink and cyan gradient bar fills
  • No JavaScript; hover lift is off under prefers-reduced-motion

Accessibility

Each usage bar has role="meter" with an accessible name, aria-valuenow and an aria-valuetext that repeats the used amount. The cards contain no interactive controls, all text is light on a dark translucent surface, and the hover lift and colour transition switch off under prefers-reduced-motion.

Customise it

Change the glass tint and blur in .gc-card (background, border and backdrop-filter) and the bar fills in .gc-b1 i and .gc-b2 i. In Bootstrap the tint is --bs-card-bg and the track is --bs-progress-bg; in Tailwind edit bg-white/8, backdrop-blur-[18px] and the bar's from-/to- utilities.