Open demo

CSS code

HTML 
<div class="g-scene" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
<div class="wrap"><div class="cards">
<div><span class="lbl lbl--chip">Content card</span>
<article class="g-glass g-card">
  <div class="g-media" aria-hidden="true"><svg viewBox="0 0 300 140" preserveAspectRatio="xMidYMid slice"><circle cx="218" cy="46" r="24" fill="#fde047"/><path d="M0 108 70 62l58 38 62-48 110 66v22H0Z" fill="#fff" fill-opacity=".38"/><path d="M0 140v-22c80-36 150 4 210-14 40-12 70-10 90-4v40Z" fill="#1e1b4b" fill-opacity=".38"/></svg></div>
  <span class="g-chip">Field notes</span>
  <h3><a class="g-title-link" href="#story">How we cut our build time to 40 seconds</a></h3>
  <p class="g-muted">Remote caching, smaller images and one bold decision about our test suite.</p>
  <p class="g-meta">Ines Moreau · 6 min read</p>
</article></div>
<div><span class="lbl lbl--chip">Stat tile</span>
<article class="g-glass g-card">
  <div class="g-stat-top"><h3>Active subscribers</h3><span class="g-badge-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6.5 6.5 0 0 1 3.5 6"/></svg></span></div>
  <p class="g-value">12,846</p>
  <p class="g-delta"><b><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6"/></svg>8.2%</b>vs September</p>
  <dl class="g-minis"><div><dt>New this month</dt><dd>1,204</dd></div><div><dt>Cancelled</dt><dd>230</dd></div></dl>
  <svg class="g-spark" viewBox="0 0 200 56" preserveAspectRatio="none" aria-hidden="true"><path d="M0 46 20 42l20 2 20-10 20 2 20-10 20 4 20-12 20 4 20-12 20 2v44H0Z" fill="currentColor" fill-opacity=".14"/><path d="M0 46 20 42l20 2 20-10 20 2 20-10 20 4 20-12 20 4 20-12 20 2" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round" vector-effect="non-scaling-stroke"/></svg>
  <p class="sr-only">Up from 11,872 a month ago, rising most weeks.</p>
</article></div>
<div><span class="lbl lbl--chip">Profile card</span>
<article class="g-glass g-card g-profile">
  <div class="g-avatar" aria-hidden="true">MK</div>
  <div><h3>Maya Kobayashi</h3><p class="g-muted">Product designer · Lisbon</p></div>
  <dl class="g-stats"><div><dt>Projects</dt><dd>48</dd></div><div><dt>Followers</dt><dd>2.1k</dd></div><div><dt>Following</dt><dd>312</dd></div></dl>
  <div class="g-row"><button type="button" class="g-btn g-btn--accent g-btn--sm">Follow</button><button type="button" class="g-btn g-btn--sm">Message</button></div>
</article></div>
<div><span class="lbl lbl--chip">Pricing card</span>
<article class="g-glass g-card">
  <div class="g-price-head"><h3>Studio</h3><span class="g-chip g-chip--accent">Most popular</span></div>
  <p class="g-amount"><b>$24</b><span>per month</span></p>
  <p class="g-muted">Billed yearly at $288. Cancel any time.</p>
  <ul class="g-ticks">
    <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Unlimited projects</li>
    <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>5 team seats</li>
    <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>200 GB file storage</li>
    <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Priority email support</li>
  </ul>
  <a class="g-btn g-btn--accent" href="#trial">Start 14-day trial</a>
</article></div>
</div></div>
CSS 
/* ===== uiCookies Glassmorphism kit: design tokens (identical in every set) =====
   Retheme the whole kit here. Light scene on :root, dark scene on [data-scene="dark"]
   (or any [data-scene] holding a checked [data-scene-switch]). Selectors use :where()
   so the fallbacks below always win. */
:where(:root,[data-scene="light"]){
  color-scheme:light;
  /* background scene: the colour the glass frosts */
  --scene-base:linear-gradient(155deg,#eceffe 0%,#fbeef7 52%,#e6f6fb 100%);
  --scene-1:linear-gradient(140deg,#7c3aed,#c026d3);
  --scene-2:linear-gradient(140deg,#fb7185,#f97316);
  --scene-3:linear-gradient(140deg,#22d3ee,#3b82f6);
  --scene-4:linear-gradient(140deg,#fde047,#fb923c);
  /* glass */
  --glass-tint:255 255 255;
  --glass-border:rgb(255 255 255 / .8);
  --glass-edge:rgb(36 32 88 / .9);
  --glass-highlight:inset 0 1px 0 rgb(255 255 255 / .85);
  --glass-shadow:0 18px 40px -18px rgb(37 30 102 / .45);
  --glass-ink:#16133a;
  --glass-ink-soft:#3b3862;
  --glass-accent:#4338ca;
  --glass-accent-bg:rgb(67 56 202 / .92);
  --glass-on-accent:#fff;
  --glass-check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glass-focus:#1e1b4b;
  --glass-good:#14532d;--glass-good-bg:rgb(220 252 231 / .9);
  --glass-bad:#991b1b;--glass-bad-bg:rgb(254 226 226 / .9);
  --glass-warn:#7c2d12;--glass-warn-bg:rgb(254 243 199 / .9);
  --glass-scrim:rgb(22 19 58 / .3);
}
:where([data-scene="dark"]),:where([data-scene]:has([data-scene-switch]:checked)){
  color-scheme:dark;
  --scene-base:linear-gradient(155deg,#0a0c22 0%,#170c2c 52%,#06171f 100%);
  --scene-1:linear-gradient(140deg,#6d28d9,#a21caf);
  --scene-2:linear-gradient(140deg,#e11d48,#ea580c);
  --scene-3:linear-gradient(140deg,#0891b2,#2563eb);
  --scene-4:linear-gradient(140deg,#ca8a04,#c2410c);
  --glass-tint:16 18 44;
  --glass-border:rgb(255 255 255 / .2);
  --glass-edge:rgb(214 220 255 / .72);
  --glass-highlight:inset 0 1px 0 rgb(255 255 255 / .16);
  --glass-shadow:0 18px 40px -18px rgb(0 0 0 / .75);
  --glass-ink:#f5f6ff;
  --glass-ink-soft:#d0d3ee;
  --glass-accent:#a5b4fc;
  --glass-accent-bg:rgb(165 180 252 / .96);
  --glass-on-accent:#14123a;
  --glass-check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2314123a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glass-focus:#c7d2fe;
  --glass-good:#bbf7d0;--glass-good-bg:rgb(20 83 45 / .7);
  --glass-bad:#fecaca;--glass-bad-bg:rgb(127 29 29 / .7);
  --glass-warn:#fde68a;--glass-warn-bg:rgb(120 53 15 / .7);
  --glass-scrim:rgb(0 0 0 / .5);
}
:where(:root){
  --glass-alpha:.6;          /* panels and cards */
  --glass-alpha-strong:.82;  /* menus, dialogs, toasts: they cover unknown content */
  --glass-alpha-control:.5;  /* buttons and fields sitting on a panel */
  --glass-blur:18px;
  --glass-saturate:150%;
  --glass-radius:20px;
}
/* derived: recomputed inside every scene so a dark scene gets dark glass */
:where(:root,[data-scene]){
  --glass-bg:rgb(var(--glass-tint) / var(--glass-alpha));
  --glass-bg-strong:rgb(var(--glass-tint) / var(--glass-alpha-strong));
  --glass-bg-control:rgb(var(--glass-tint) / var(--glass-alpha-control));
}
/* no backdrop-filter: frosting can't happen, so the glass turns nearly solid */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :where(:root){--glass-alpha:.94;--glass-alpha-strong:.97;--glass-alpha-control:.9}
}
@media (prefers-reduced-transparency:reduce){
  :where(:root){--glass-alpha:.93;--glass-alpha-strong:.97;--glass-alpha-control:.9;--glass-blur:8px}
}
@media (prefers-contrast:more){
  :where(:root){--glass-alpha:.96;--glass-alpha-strong:.98;--glass-alpha-control:.96}
  :where(:root,[data-scene]){--glass-border:var(--glass-ink);--glass-edge:var(--glass-ink)}
}
/* ===== end of tokens ===== */
/* scene: fixed page background of four gradient orbs (decorative, aria-hidden) */
:where([data-scene]){color:var(--glass-ink)}
.g-scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--scene-base)}
.g-scene i{position:absolute;aspect-ratio:1;border-radius:50%;animation:g-drift 32s ease-in-out infinite alternate}
.g-scene i:nth-child(1){width:clamp(240px,40vw,520px);left:-7%;top:-9%;background:var(--scene-1)}
.g-scene i:nth-child(2){width:clamp(170px,26vw,360px);right:-5%;top:18%;background:var(--scene-2);animation-delay:-9s}
.g-scene i:nth-child(3){width:clamp(220px,34vw,460px);left:28%;bottom:-16%;background:var(--scene-3);animation-delay:-17s}
.g-scene i:nth-child(4){width:clamp(90px,13vw,180px);left:54%;top:7%;background:var(--scene-4);animation-delay:-4s}
@keyframes g-drift{to{transform:translate3d(3vw,4vh,0) scale(1.06)}}
/* glass surface */
.g-glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);box-shadow:var(--glass-highlight),var(--glass-shadow);color:var(--glass-ink)}
.g-glass--strong{background:var(--glass-bg-strong)}
.g-panel{padding:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.g-muted{color:var(--glass-ink-soft)}
@media (prefers-reduced-motion:reduce){.g-scene i{animation:none}}
/* buttons: glass control, tinted accent glass, quiet text button, round icon button */
.g-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.g-row+.g-row{margin-top:14px}
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;
  border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass-bg-control);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));box-shadow:var(--glass-highlight);
  color:var(--glass-ink);font:inherit;font-size:.95rem;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;
  transition:background-color .2s,transform .2s}
.g-btn:hover{background:var(--glass-bg-strong)}
.g-btn:active{transform:translateY(1px)}
.g-btn:focus-visible,.g-icon-btn:focus-visible{outline:3px solid var(--glass-focus);outline-offset:3px}
.g-btn svg,.g-icon-btn svg{width:18px;height:18px;flex:none}
.g-btn--accent{border-color:transparent;background:var(--glass-accent-bg);color:var(--glass-on-accent);
  box-shadow:var(--glass-highlight)}
.g-btn--accent:hover{background:var(--glass-accent-bg);filter:brightness(1.08)}
.g-btn--quiet{border-color:transparent;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.g-btn--quiet:hover{background:var(--glass-bg-control)}
.g-btn--strong{background:var(--glass-bg-strong)} /* for buttons placed straight on the scene */
.g-btn--sm{min-height:36px;padding:0 14px;font-size:.85rem}
.g-btn--lg{min-height:54px;padding:0 28px;font-size:1.05rem}
.g-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.g-icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--glass-edge);border-radius:50%;
  background:var(--glass-bg-control);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--glass-highlight);color:var(--glass-ink);cursor:pointer;transition:background-color .2s,transform .2s}
.g-icon-btn:hover{background:var(--glass-bg-strong)}
.g-icon-btn:active{transform:scale(.96)}
.g-icon-btn--accent{border-color:transparent;background:var(--glass-accent-bg);color:var(--glass-on-accent)}
.g-icon-btn--accent:hover{background:var(--glass-accent-bg);filter:brightness(1.08)}
.g-icon-btn--lg{width:56px;height:56px}
.g-icon-btn--lg svg{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.g-btn,.g-icon-btn{transition:none}.g-btn:active,.g-icon-btn:active{transform:none}}
/* cards: content, stat tile, profile, pricing. All sit on .g-glass */
.g-card{display:flex;flex-direction:column;gap:12px;padding:22px}
:where(.g-card) h3{font-size:1.08rem;line-height:1.3}
:where(.g-card) p{font-size:.92rem}
.g-media{height:132px;margin:-12px -12px 4px;border-radius:calc(var(--glass-radius) - 8px);overflow:hidden;background:var(--scene-3)}
.g-media svg{display:block;width:100%;height:100%}
.g-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);font-size:.75rem;font-weight:700;color:var(--glass-ink)}
.g-chip--accent{border-color:transparent;background:var(--glass-accent-bg);color:var(--glass-on-accent)}
.g-title-link{color:inherit;text-decoration:none;border-radius:4px}
.g-title-link:hover{text-decoration:underline;text-underline-offset:3px}
.g-title-link:focus-visible{outline:3px solid var(--glass-focus);outline-offset:2px}
.g-meta{margin-top:auto;font-size:.82rem;color:var(--glass-ink-soft)}
.g-stat-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.g-stat-top h3{font-size:.9rem;font-weight:600;color:var(--glass-ink-soft)}
.g-badge-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--glass-accent-bg);color:var(--glass-on-accent)}
.g-badge-icon svg{width:20px;height:20px}
.g-value{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.g-delta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.85rem;color:var(--glass-ink-soft)}
.g-delta b{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:999px;background:var(--glass-good-bg);color:var(--glass-good);font-weight:700}
.g-delta b svg{width:14px;height:14px}
.g-minis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 0}
.g-minis div{display:flex;flex-direction:column-reverse;padding:8px 10px;border:1px solid var(--glass-border);border-radius:12px;background:var(--glass-bg-control)}
.g-minis dt{font-size:.75rem;color:var(--glass-ink-soft)}
.g-minis dd{margin:0;font-weight:700}
.g-spark{display:block;width:100%;height:56px;margin-top:auto;color:var(--glass-accent)}
.g-profile{align-items:center;text-align:center}
.g-avatar{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--scene-1);color:#fff;font-size:1.5rem;font-weight:700;
  border:3px solid var(--glass-border);box-shadow:0 8px 20px -10px rgb(0 0 0 / .45)}
.g-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin:4px 0;padding:12px 0;border-block:1px solid var(--glass-border)}
.g-stats div{display:flex;flex-direction:column-reverse}
.g-stats dt{font-size:.75rem;color:var(--glass-ink-soft)}
.g-stats dd{margin:0;font-size:1.05rem;font-weight:700}
.g-profile .g-row{justify-content:center}
.g-price-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.g-amount{display:flex;align-items:baseline;gap:6px}
.g-amount b{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.g-amount span{font-size:.9rem;color:var(--glass-ink-soft)}
.g-ticks{list-style:none;display:grid;gap:9px;margin:4px 0 6px;padding:0;font-size:.92rem}
.g-ticks li{display:flex;gap:10px;align-items:flex-start}
.g-ticks svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--glass-accent)}
.g-card .g-btn{margin-top:auto}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="g-scene" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
<div class="wrap"><div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4">
<div class="col d-flex flex-column"><span class="lbl lbl--chip">Content card</span>
<article class="card g-glass flex-fill"><div class="card-body g-card">
  <div class="g-media" aria-hidden="true"><svg viewBox="0 0 300 140" preserveAspectRatio="xMidYMid slice"><circle cx="218" cy="46" r="24" fill="#fde047"/><path d="M0 108 70 62l58 38 62-48 110 66v22H0Z" fill="#fff" fill-opacity=".38"/><path d="M0 140v-22c80-36 150 4 210-14 40-12 70-10 90-4v40Z" fill="#1e1b4b" fill-opacity=".38"/></svg></div>
  <span class="badge g-chip">Field notes</span>
  <h3 class="card-title"><a class="g-title-link" href="#story">How we cut our build time to 40 seconds</a></h3>
  <p class="card-text g-muted">Remote caching, smaller images and one bold decision about our test suite.</p>
  <p class="g-meta">Ines Moreau · 6 min read</p>
</div></article></div>
<div class="col d-flex flex-column"><span class="lbl lbl--chip">Stat tile</span>
<article class="card g-glass flex-fill"><div class="card-body g-card">
  <div class="g-stat-top"><h3>Active subscribers</h3><span class="g-badge-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6.5 6.5 0 0 1 3.5 6"/></svg></span></div>
  <p class="g-value">12,846</p>
  <p class="g-delta"><b><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6"/></svg>8.2%</b>vs September</p>
  <dl class="g-minis"><div><dt>New this month</dt><dd>1,204</dd></div><div><dt>Cancelled</dt><dd>230</dd></div></dl>
  <svg class="g-spark" viewBox="0 0 200 56" preserveAspectRatio="none" aria-hidden="true"><path d="M0 46 20 42l20 2 20-10 20 2 20-10 20 4 20-12 20 4 20-12 20 2v44H0Z" fill="currentColor" fill-opacity=".14"/><path d="M0 46 20 42l20 2 20-10 20 2 20-10 20 4 20-12 20 4 20-12 20 2" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round" vector-effect="non-scaling-stroke"/></svg>
  <p class="visually-hidden">Up from 11,872 a month ago, rising most weeks.</p>
</div></article></div>
<div class="col d-flex flex-column"><span class="lbl lbl--chip">Profile card</span>
<article class="card g-glass flex-fill"><div class="card-body g-card g-profile">
  <div class="g-avatar" aria-hidden="true">MK</div>
  <div><h3 class="card-title">Maya Kobayashi</h3><p class="g-muted">Product designer · Lisbon</p></div>
  <dl class="g-stats"><div><dt>Projects</dt><dd>48</dd></div><div><dt>Followers</dt><dd>2.1k</dd></div><div><dt>Following</dt><dd>312</dd></div></dl>
  <div class="d-flex justify-content-center gap-2"><button type="button" class="btn btn-glass btn-glass-accent btn-sm">Follow</button><button type="button" class="btn btn-glass btn-sm">Message</button></div>
</div></article></div>
<div class="col d-flex flex-column"><span class="lbl lbl--chip">Pricing card</span>
<article class="card g-glass flex-fill"><div class="card-body g-card">
  <div class="g-price-head"><h3 class="card-title">Studio</h3><span class="badge g-chip g-chip--accent">Most popular</span></div>
  <p class="g-amount"><b>$24</b><span>per month</span></p>
  <p class="g-muted">Billed yearly at $288. Cancel any time.</p>
  <ul class="list-unstyled g-ticks">
    <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Unlimited projects</li>
    <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>5 team seats</li>
    <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>200 GB file storage</li>
    <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Priority email support</li>
  </ul>
  <a class="btn btn-glass btn-glass-accent" href="#trial">Start 14-day trial</a>
</div></article></div>
</div></div>
CSS 
/* ===== uiCookies Glassmorphism kit: design tokens (identical in every set) =====
   Retheme the whole kit here. Light scene on :root, dark scene on [data-scene="dark"]
   (or any [data-scene] holding a checked [data-scene-switch]). Selectors use :where()
   so the fallbacks below always win. */
:where(:root,[data-scene="light"]){
  color-scheme:light;
  /* background scene: the colour the glass frosts */
  --scene-base:linear-gradient(155deg,#eceffe 0%,#fbeef7 52%,#e6f6fb 100%);
  --scene-1:linear-gradient(140deg,#7c3aed,#c026d3);
  --scene-2:linear-gradient(140deg,#fb7185,#f97316);
  --scene-3:linear-gradient(140deg,#22d3ee,#3b82f6);
  --scene-4:linear-gradient(140deg,#fde047,#fb923c);
  /* glass */
  --glass-tint:255 255 255;
  --glass-border:rgb(255 255 255 / .8);
  --glass-edge:rgb(36 32 88 / .9);
  --glass-highlight:inset 0 1px 0 rgb(255 255 255 / .85);
  --glass-shadow:0 18px 40px -18px rgb(37 30 102 / .45);
  --glass-ink:#16133a;
  --glass-ink-soft:#3b3862;
  --glass-accent:#4338ca;
  --glass-accent-bg:rgb(67 56 202 / .92);
  --glass-on-accent:#fff;
  --glass-check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glass-focus:#1e1b4b;
  --glass-good:#14532d;--glass-good-bg:rgb(220 252 231 / .9);
  --glass-bad:#991b1b;--glass-bad-bg:rgb(254 226 226 / .9);
  --glass-warn:#7c2d12;--glass-warn-bg:rgb(254 243 199 / .9);
  --glass-scrim:rgb(22 19 58 / .3);
}
:where([data-scene="dark"]),:where([data-scene]:has([data-scene-switch]:checked)){
  color-scheme:dark;
  --scene-base:linear-gradient(155deg,#0a0c22 0%,#170c2c 52%,#06171f 100%);
  --scene-1:linear-gradient(140deg,#6d28d9,#a21caf);
  --scene-2:linear-gradient(140deg,#e11d48,#ea580c);
  --scene-3:linear-gradient(140deg,#0891b2,#2563eb);
  --scene-4:linear-gradient(140deg,#ca8a04,#c2410c);
  --glass-tint:16 18 44;
  --glass-border:rgb(255 255 255 / .2);
  --glass-edge:rgb(214 220 255 / .72);
  --glass-highlight:inset 0 1px 0 rgb(255 255 255 / .16);
  --glass-shadow:0 18px 40px -18px rgb(0 0 0 / .75);
  --glass-ink:#f5f6ff;
  --glass-ink-soft:#d0d3ee;
  --glass-accent:#a5b4fc;
  --glass-accent-bg:rgb(165 180 252 / .96);
  --glass-on-accent:#14123a;
  --glass-check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2314123a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glass-focus:#c7d2fe;
  --glass-good:#bbf7d0;--glass-good-bg:rgb(20 83 45 / .7);
  --glass-bad:#fecaca;--glass-bad-bg:rgb(127 29 29 / .7);
  --glass-warn:#fde68a;--glass-warn-bg:rgb(120 53 15 / .7);
  --glass-scrim:rgb(0 0 0 / .5);
}
:where(:root){
  --glass-alpha:.6;          /* panels and cards */
  --glass-alpha-strong:.82;  /* menus, dialogs, toasts: they cover unknown content */
  --glass-alpha-control:.5;  /* buttons and fields sitting on a panel */
  --glass-blur:18px;
  --glass-saturate:150%;
  --glass-radius:20px;
}
/* derived: recomputed inside every scene so a dark scene gets dark glass */
:where(:root,[data-scene]){
  --glass-bg:rgb(var(--glass-tint) / var(--glass-alpha));
  --glass-bg-strong:rgb(var(--glass-tint) / var(--glass-alpha-strong));
  --glass-bg-control:rgb(var(--glass-tint) / var(--glass-alpha-control));
}
/* no backdrop-filter: frosting can't happen, so the glass turns nearly solid */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :where(:root){--glass-alpha:.94;--glass-alpha-strong:.97;--glass-alpha-control:.9}
}
@media (prefers-reduced-transparency:reduce){
  :where(:root){--glass-alpha:.93;--glass-alpha-strong:.97;--glass-alpha-control:.9;--glass-blur:8px}
}
@media (prefers-contrast:more){
  :where(:root){--glass-alpha:.96;--glass-alpha-strong:.98;--glass-alpha-control:.96}
  :where(:root,[data-scene]){--glass-border:var(--glass-ink);--glass-edge:var(--glass-ink)}
}
/* ===== end of tokens ===== */
/* scene: fixed page background of four gradient orbs (decorative, aria-hidden) */
:where([data-scene]){color:var(--glass-ink)}
.g-scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--scene-base)}
.g-scene i{position:absolute;aspect-ratio:1;border-radius:50%;animation:g-drift 32s ease-in-out infinite alternate}
.g-scene i:nth-child(1){width:clamp(240px,40vw,520px);left:-7%;top:-9%;background:var(--scene-1)}
.g-scene i:nth-child(2){width:clamp(170px,26vw,360px);right:-5%;top:18%;background:var(--scene-2);animation-delay:-9s}
.g-scene i:nth-child(3){width:clamp(220px,34vw,460px);left:28%;bottom:-16%;background:var(--scene-3);animation-delay:-17s}
.g-scene i:nth-child(4){width:clamp(90px,13vw,180px);left:54%;top:7%;background:var(--scene-4);animation-delay:-4s}
@keyframes g-drift{to{transform:translate3d(3vw,4vh,0) scale(1.06)}}
/* glass surface */
.g-glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);box-shadow:var(--glass-highlight),var(--glass-shadow);color:var(--glass-ink)}
.g-glass--strong{background:var(--glass-bg-strong)}
.g-panel{padding:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.g-muted{color:var(--glass-ink-soft)}
@media (prefers-reduced-motion:reduce){.g-scene i{animation:none}}
/* cards: content, stat tile, profile, pricing. All sit on .g-glass */
.g-card{display:flex;flex-direction:column;gap:12px;padding:22px}
:where(.g-card) h3{font-size:1.08rem;line-height:1.3}
:where(.g-card) p{font-size:.92rem}
.g-media{height:132px;margin:-12px -12px 4px;border-radius:calc(var(--glass-radius) - 8px);overflow:hidden;background:var(--scene-3)}
.g-media svg{display:block;width:100%;height:100%}
.g-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);font-size:.75rem;font-weight:700;color:var(--glass-ink)}
.g-chip--accent{border-color:transparent;background:var(--glass-accent-bg);color:var(--glass-on-accent)}
.g-title-link{color:inherit;text-decoration:none;border-radius:4px}
.g-title-link:hover{text-decoration:underline;text-underline-offset:3px}
.g-title-link:focus-visible{outline:3px solid var(--glass-focus);outline-offset:2px}
.g-meta{margin-top:auto;font-size:.82rem;color:var(--glass-ink-soft)}
.g-stat-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.g-stat-top h3{font-size:.9rem;font-weight:600;color:var(--glass-ink-soft)}
.g-badge-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--glass-accent-bg);color:var(--glass-on-accent)}
.g-badge-icon svg{width:20px;height:20px}
.g-value{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.g-delta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.85rem;color:var(--glass-ink-soft)}
.g-delta b{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:999px;background:var(--glass-good-bg);color:var(--glass-good);font-weight:700}
.g-delta b svg{width:14px;height:14px}
.g-minis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 0}
.g-minis div{display:flex;flex-direction:column-reverse;padding:8px 10px;border:1px solid var(--glass-border);border-radius:12px;background:var(--glass-bg-control)}
.g-minis dt{font-size:.75rem;color:var(--glass-ink-soft)}
.g-minis dd{margin:0;font-weight:700}
.g-spark{display:block;width:100%;height:56px;margin-top:auto;color:var(--glass-accent)}
.g-profile{align-items:center;text-align:center}
.g-avatar{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--scene-1);color:#fff;font-size:1.5rem;font-weight:700;
  border:3px solid var(--glass-border);box-shadow:0 8px 20px -10px rgb(0 0 0 / .45)}
.g-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin:4px 0;padding:12px 0;border-block:1px solid var(--glass-border)}
.g-stats div{display:flex;flex-direction:column-reverse}
.g-stats dt{font-size:.75rem;color:var(--glass-ink-soft)}
.g-stats dd{margin:0;font-size:1.05rem;font-weight:700}
.g-profile .g-row{justify-content:center}
.g-price-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.g-amount{display:flex;align-items:baseline;gap:6px}
.g-amount b{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.g-amount span{font-size:.9rem;color:var(--glass-ink-soft)}
.g-ticks{list-style:none;display:grid;gap:9px;margin:4px 0 6px;padding:0;font-size:.92rem}
.g-ticks li{display:flex;gap:10px;align-items:flex-start}
.g-ticks svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--glass-accent)}
.g-card .g-btn{margin-top:auto}
/* Bootstrap: the glass tokens feed Bootstrap's own component variables */
.card.g-glass{--bs-card-bg:var(--glass-bg);--bs-card-border-color:var(--glass-border);--bs-card-border-radius:var(--glass-radius);
  --bs-card-inner-border-radius:calc(var(--glass-radius) - 1px);--bs-card-color:var(--glass-ink);--bs-card-spacer-x:24px;--bs-card-spacer-y:24px;
  --bs-card-title-color:var(--glass-ink);--bs-card-subtitle-color:var(--glass-ink-soft)}
:where([data-scene]){--bs-body-color:var(--glass-ink);--bs-secondary-color:var(--glass-ink-soft);--bs-border-color:var(--glass-edge);;--bs-emphasis-color:var(--glass-ink)}
.g-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.btn-glass{--bs-btn-padding-x:20px;--bs-btn-padding-y:0;--bs-btn-font-size:.95rem;--bs-btn-font-weight:600;--bs-btn-line-height:1;--bs-btn-border-radius:999px;
  --bs-btn-color:var(--glass-ink);--bs-btn-bg:var(--glass-bg-control);--bs-btn-border-color:var(--glass-edge);
  --bs-btn-hover-color:var(--glass-ink);--bs-btn-hover-bg:var(--glass-bg-strong);--bs-btn-hover-border-color:var(--glass-edge);
  --bs-btn-active-color:var(--glass-ink);--bs-btn-active-bg:var(--glass-bg-strong);--bs-btn-active-border-color:var(--glass-edge);
  --bs-btn-disabled-color:var(--glass-ink);--bs-btn-disabled-bg:var(--glass-bg-control);--bs-btn-disabled-border-color:var(--glass-edge);--bs-btn-disabled-opacity:.5;
  --bs-btn-focus-box-shadow:var(--glass-highlight);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));box-shadow:var(--glass-highlight);
  transition:background-color .2s,transform .2s}
.btn-glass:active{transform:translateY(1px)}
.btn-glass:focus-visible,.btn-check:focus-visible+.btn-glass{outline:3px solid var(--glass-focus);outline-offset:3px}
.btn-glass svg{width:18px;height:18px;flex:none}
.btn-glass-accent{--bs-btn-color:var(--glass-on-accent);--bs-btn-bg:var(--glass-accent-bg);--bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--glass-on-accent);--bs-btn-hover-bg:var(--glass-accent-bg);--bs-btn-hover-border-color:transparent;
  --bs-btn-active-color:var(--glass-on-accent);--bs-btn-active-bg:var(--glass-accent-bg);--bs-btn-active-border-color:transparent}
.btn-glass-accent:hover{filter:brightness(1.08)}
.btn-glass-quiet{--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-border-color:transparent;--bs-btn-hover-bg:var(--glass-bg-control);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;text-decoration:underline;text-underline-offset:4px}
.btn-glass-strong{--bs-btn-bg:var(--glass-bg-strong)} /* for buttons placed straight on the scene */
.btn-glass.btn-sm{--bs-btn-padding-x:14px;--bs-btn-font-size:.85rem;min-height:36px}
.btn-glass.btn-lg{--bs-btn-padding-x:28px;--bs-btn-font-size:1.05rem;min-height:54px}
.btn-glass.btn-icon{width:44px;height:44px;min-height:0;padding:0}
.btn-glass.btn-icon.btn-sm{width:36px;height:36px}
.btn-glass.btn-icon.btn-sm svg{width:16px;height:16px}
.btn-glass.btn-icon.btn-lg{width:56px;height:56px}
.btn-glass.btn-icon.btn-lg svg{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.btn-glass{transition:none}.btn-glass:active{transform:none}}
/* Bootstrap cards: .card-body carries .g-card, .badge carries .g-chip; reset Bootstrap's text margins inside */
.card-body.g-card{padding:22px}
.g-card :is(h3,p,dl,dd,ul){margin-bottom:0}
.g-card dt{font-weight:400}
.g-card .badge.g-chip{--bs-badge-padding-x:10px;--bs-badge-padding-y:4px;--bs-badge-font-size:.75rem;--bs-badge-font-weight:700;--bs-badge-color:var(--glass-ink);
  --bs-badge-border-radius:999px;line-height:1.45}
.g-card .badge.g-chip--accent{--bs-badge-color:var(--glass-on-accent)}
.g-card .card-title{font-weight:700}
.g-card .btn-glass{margin-top:auto}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div aria-hidden="true" class="pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-(image:--scene-base)">
  <i class="absolute -top-[9%] -left-[7%] aspect-square w-[clamp(240px,40vw,520px)] rounded-full bg-(image:--scene-1) motion-safe:animate-drift"></i>
  <i class="absolute top-[18%] -right-[5%] aspect-square w-[clamp(170px,26vw,360px)] rounded-full bg-(image:--scene-2) [animation-delay:-9s] motion-safe:animate-drift"></i>
  <i class="absolute -bottom-[16%] left-[28%] aspect-square w-[clamp(220px,34vw,460px)] rounded-full bg-(image:--scene-3) [animation-delay:-17s] motion-safe:animate-drift"></i>
  <i class="absolute top-[7%] left-[54%] aspect-square w-[clamp(90px,13vw,180px)] rounded-full bg-(image:--scene-4) [animation-delay:-4s] motion-safe:animate-drift"></i>
</div>
<div class="mx-auto max-w-[1100px]"><div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,232px),1fr))] gap-[22px]">
<div class="flex flex-col"><span class="self-start inline-block rounded-full border border-glass-border bg-glass-strong px-[11px] py-[5px] text-[.72rem] font-bold tracking-[.12em] text-ink-soft uppercase backdrop-blur-glass mb-4">Content card</span>
<article class="flex flex-1 flex-col gap-3 p-[22px] border border-glass-border bg-glass text-ink shadow-glass inset-shadow-glass backdrop-blur-glass backdrop-saturate-150 rounded-glass">
  <div class="-mx-3 -mt-3 mb-1 h-[132px] overflow-hidden rounded-[12px] bg-(image:--scene-3)" aria-hidden="true"><svg class="block size-full" viewBox="0 0 300 140" preserveAspectRatio="xMidYMid slice"><circle cx="218" cy="46" r="24" fill="#fde047"/><path d="M0 108 70 62l58 38 62-48 110 66v22H0Z" fill="#fff" fill-opacity=".38"/><path d="M0 140v-22c80-36 150 4 210-14 40-12 70-10 90-4v40Z" fill="#1e1b4b" fill-opacity=".38"/></svg></div>
  <span class="self-start inline-flex items-center gap-1.5 rounded-full border border-glass-border bg-glass-strong px-2.5 py-1 text-[.75rem] font-bold text-ink">Field notes</span>
  <h3 class="text-[1.08rem] leading-[1.3] font-bold"><a class="rounded-[4px] hover:underline hover:underline-offset-3 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-focus" href="#story">How we cut our build time to 40 seconds</a></h3>
  <p class="text-[.92rem] text-ink-soft">Remote caching, smaller images and one bold decision about our test suite.</p>
  <p class="mt-auto text-[.82rem] text-ink-soft">Ines Moreau · 6 min read</p>
</article></div>
<div class="flex flex-col"><span class="self-start inline-block rounded-full border border-glass-border bg-glass-strong px-[11px] py-[5px] text-[.72rem] font-bold tracking-[.12em] text-ink-soft uppercase backdrop-blur-glass mb-4">Stat tile</span>
<article class="flex flex-1 flex-col gap-3 p-[22px] border border-glass-border bg-glass text-ink shadow-glass inset-shadow-glass backdrop-blur-glass backdrop-saturate-150 rounded-glass">
  <div class="flex items-center justify-between gap-3"><h3 class="text-[.9rem] font-semibold text-ink-soft">Active subscribers</h3><span class="grid size-[38px] place-items-center rounded-xl bg-accent-glass text-on-accent" aria-hidden="true"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6.5 6.5 0 0 1 3.5 6"/></svg></span></div>
  <p class="text-[2.1rem] leading-[1.1] font-extrabold tracking-[-.02em]">12,846</p>
  <p class="flex flex-wrap items-center gap-2 text-[.85rem] text-ink-soft"><b class="inline-flex items-center gap-[3px] rounded-full bg-good-glass px-2 py-[3px] font-bold text-good"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6"/></svg>8.2%</b>vs September</p>
  <dl class="mt-0.5 grid grid-cols-2 gap-2"><div class="flex flex-col-reverse rounded-xl border border-glass-border bg-glass-control px-2.5 py-2"><dt class="text-[.75rem] text-ink-soft">New this month</dt><dd class="font-bold">1,204</dd></div><div class="flex flex-col-reverse rounded-xl border border-glass-border bg-glass-control px-2.5 py-2"><dt class="text-[.75rem] text-ink-soft">Cancelled</dt><dd class="font-bold">230</dd></div></dl>
  <svg class="mt-auto block h-14 w-full text-accent" viewBox="0 0 200 56" preserveAspectRatio="none" aria-hidden="true"><path d="M0 46 20 42l20 2 20-10 20 2 20-10 20 4 20-12 20 4 20-12 20 2v44H0Z" fill="currentColor" fill-opacity=".14"/><path d="M0 46 20 42l20 2 20-10 20 2 20-10 20 4 20-12 20 4 20-12 20 2" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round" vector-effect="non-scaling-stroke"/></svg>
  <p class="sr-only">Up from 11,872 a month ago, rising most weeks.</p>
</article></div>
<div class="flex flex-col"><span class="self-start inline-block rounded-full border border-glass-border bg-glass-strong px-[11px] py-[5px] text-[.72rem] font-bold tracking-[.12em] text-ink-soft uppercase backdrop-blur-glass mb-4">Profile card</span>
<article class="flex flex-1 flex-col gap-3 p-[22px] border border-glass-border bg-glass text-ink shadow-glass inset-shadow-glass backdrop-blur-glass backdrop-saturate-150 rounded-glass items-center text-center">
  <div class="grid size-[76px] place-items-center rounded-full border-3 border-glass-border bg-(image:--scene-1) text-2xl font-bold text-white shadow-[0_8px_20px_-10px_rgb(0_0_0/.45)]" aria-hidden="true">MK</div>
  <div><h3 class="text-[1.08rem] leading-[1.3] font-bold">Maya Kobayashi</h3><p class="text-[.92rem] text-ink-soft">Product designer · Lisbon</p></div>
  <dl class="my-1 grid w-full grid-cols-3 border-y border-glass-border py-3"><div class="flex flex-col-reverse"><dt class="text-[.75rem] text-ink-soft">Projects</dt><dd class="text-[1.05rem] font-bold">48</dd></div><div class="flex flex-col-reverse"><dt class="text-[.75rem] text-ink-soft">Followers</dt><dd class="text-[1.05rem] font-bold">2.1k</dd></div><div class="flex flex-col-reverse"><dt class="text-[.75rem] text-ink-soft">Following</dt><dd class="text-[1.05rem] font-bold">312</dd></div></dl>
  <div class="flex flex-wrap justify-center gap-3"><button type="button" class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-full border border-transparent bg-accent-glass leading-none font-semibold text-on-accent no-underline inset-shadow-glass backdrop-blur-glass transition-[filter,translate] duration-200 hover:brightness-[1.08] active:translate-y-px focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-focus motion-reduce:transition-none motion-reduce:active:translate-y-0 min-h-9 px-[14px] text-[.85rem]">Follow</button><button type="button" class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-full border border-glass-edge bg-glass-control leading-none font-semibold text-ink no-underline inset-shadow-glass backdrop-blur-glass transition-[background-color,translate] duration-200 hover:bg-glass-strong active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-focus motion-reduce:transition-none motion-reduce:active:translate-y-0 min-h-9 px-[14px] text-[.85rem]">Message</button></div>
</article></div>
<div class="flex flex-col"><span class="self-start inline-block rounded-full border border-glass-border bg-glass-strong px-[11px] py-[5px] text-[.72rem] font-bold tracking-[.12em] text-ink-soft uppercase backdrop-blur-glass mb-4">Pricing card</span>
<article class="flex flex-1 flex-col gap-3 p-[22px] border border-glass-border bg-glass text-ink shadow-glass inset-shadow-glass backdrop-blur-glass backdrop-saturate-150 rounded-glass">
  <div class="flex flex-wrap items-center justify-between gap-2.5"><h3 class="text-[1.08rem] leading-[1.3] font-bold">Studio</h3><span class="inline-flex items-center rounded-full bg-accent-glass px-2.5 py-1 text-[.75rem] font-bold text-on-accent">Most popular</span></div>
  <p class="flex items-baseline gap-1.5"><b class="text-[2.4rem] leading-none font-extrabold tracking-[-.03em]">$24</b><span class="text-[.9rem] text-ink-soft">per month</span></p>
  <p class="text-[.92rem] text-ink-soft">Billed yearly at $288. Cancel any time.</p>
  <ul class="mt-1 mb-1.5 grid gap-[9px] text-[.92rem]">
    <li class="flex items-start gap-2.5"><svg class="mt-0.5 size-[18px] flex-none text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Unlimited projects</li>
    <li class="flex items-start gap-2.5"><svg class="mt-0.5 size-[18px] flex-none text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>5 team seats</li>
    <li class="flex items-start gap-2.5"><svg class="mt-0.5 size-[18px] flex-none text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>200 GB file storage</li>
    <li class="flex items-start gap-2.5"><svg class="mt-0.5 size-[18px] flex-none text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Priority email support</li>
  </ul>
  <a class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-full border border-transparent bg-accent-glass leading-none font-semibold text-on-accent no-underline inset-shadow-glass backdrop-blur-glass transition-[filter,translate] duration-200 hover:brightness-[1.08] active:translate-y-px focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-focus motion-reduce:transition-none motion-reduce:active:translate-y-0 min-h-11 px-5 text-[.95rem] mt-auto" href="#trial">Start 14-day trial</a>
</article></div>
</div></div>
CSS 
/* ===== uiCookies Glassmorphism kit: design tokens (identical in every set) =====
   Retheme the whole kit here. Light scene on :root, dark scene on [data-scene="dark"]
   (or any [data-scene] holding a checked [data-scene-switch]). Selectors use :where()
   so the fallbacks below always win. */
:where(:root,[data-scene="light"]){
  color-scheme:light;
  /* background scene: the colour the glass frosts */
  --scene-base:linear-gradient(155deg,#eceffe 0%,#fbeef7 52%,#e6f6fb 100%);
  --scene-1:linear-gradient(140deg,#7c3aed,#c026d3);
  --scene-2:linear-gradient(140deg,#fb7185,#f97316);
  --scene-3:linear-gradient(140deg,#22d3ee,#3b82f6);
  --scene-4:linear-gradient(140deg,#fde047,#fb923c);
  /* glass */
  --glass-tint:255 255 255;
  --glass-border:rgb(255 255 255 / .8);
  --glass-edge:rgb(36 32 88 / .9);
  --glass-highlight:inset 0 1px 0 rgb(255 255 255 / .85);
  --glass-shadow:0 18px 40px -18px rgb(37 30 102 / .45);
  --glass-ink:#16133a;
  --glass-ink-soft:#3b3862;
  --glass-accent:#4338ca;
  --glass-accent-bg:rgb(67 56 202 / .92);
  --glass-on-accent:#fff;
  --glass-check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glass-focus:#1e1b4b;
  --glass-good:#14532d;--glass-good-bg:rgb(220 252 231 / .9);
  --glass-bad:#991b1b;--glass-bad-bg:rgb(254 226 226 / .9);
  --glass-warn:#7c2d12;--glass-warn-bg:rgb(254 243 199 / .9);
  --glass-scrim:rgb(22 19 58 / .3);
}
:where([data-scene="dark"]),:where([data-scene]:has([data-scene-switch]:checked)){
  color-scheme:dark;
  --scene-base:linear-gradient(155deg,#0a0c22 0%,#170c2c 52%,#06171f 100%);
  --scene-1:linear-gradient(140deg,#6d28d9,#a21caf);
  --scene-2:linear-gradient(140deg,#e11d48,#ea580c);
  --scene-3:linear-gradient(140deg,#0891b2,#2563eb);
  --scene-4:linear-gradient(140deg,#ca8a04,#c2410c);
  --glass-tint:16 18 44;
  --glass-border:rgb(255 255 255 / .2);
  --glass-edge:rgb(214 220 255 / .72);
  --glass-highlight:inset 0 1px 0 rgb(255 255 255 / .16);
  --glass-shadow:0 18px 40px -18px rgb(0 0 0 / .75);
  --glass-ink:#f5f6ff;
  --glass-ink-soft:#d0d3ee;
  --glass-accent:#a5b4fc;
  --glass-accent-bg:rgb(165 180 252 / .96);
  --glass-on-accent:#14123a;
  --glass-check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2314123a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --glass-focus:#c7d2fe;
  --glass-good:#bbf7d0;--glass-good-bg:rgb(20 83 45 / .7);
  --glass-bad:#fecaca;--glass-bad-bg:rgb(127 29 29 / .7);
  --glass-warn:#fde68a;--glass-warn-bg:rgb(120 53 15 / .7);
  --glass-scrim:rgb(0 0 0 / .5);
}
:where(:root){
  --glass-alpha:.6;          /* panels and cards */
  --glass-alpha-strong:.82;  /* menus, dialogs, toasts: they cover unknown content */
  --glass-alpha-control:.5;  /* buttons and fields sitting on a panel */
  --glass-blur:18px;
  --glass-saturate:150%;
  --glass-radius:20px;
}
/* derived: recomputed inside every scene so a dark scene gets dark glass */
:where(:root,[data-scene]){
  --glass-bg:rgb(var(--glass-tint) / var(--glass-alpha));
  --glass-bg-strong:rgb(var(--glass-tint) / var(--glass-alpha-strong));
  --glass-bg-control:rgb(var(--glass-tint) / var(--glass-alpha-control));
}
/* no backdrop-filter: frosting can't happen, so the glass turns nearly solid */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :where(:root){--glass-alpha:.94;--glass-alpha-strong:.97;--glass-alpha-control:.9}
}
@media (prefers-reduced-transparency:reduce){
  :where(:root){--glass-alpha:.93;--glass-alpha-strong:.97;--glass-alpha-control:.9;--glass-blur:8px}
}
@media (prefers-contrast:more){
  :where(:root){--glass-alpha:.96;--glass-alpha-strong:.98;--glass-alpha-control:.96}
  :where(:root,[data-scene]){--glass-border:var(--glass-ink);--glass-edge:var(--glass-ink)}
}
/* ===== end of tokens ===== */
/* Tailwind theme: utilities such as bg-glass, border-glass-edge, backdrop-blur-glass and text-ink read the tokens above */
@theme inline {
  --color-glass: var(--glass-bg);
  --color-glass-strong: var(--glass-bg-strong);
  --color-glass-control: var(--glass-bg-control);
  --color-glass-border: var(--glass-border);
  --color-glass-edge: var(--glass-edge);
  --color-ink: var(--glass-ink);
  --color-ink-soft: var(--glass-ink-soft);
  --color-accent: var(--glass-accent);
  --color-accent-glass: var(--glass-accent-bg);
  --color-on-accent: var(--glass-on-accent);
  --color-focus: var(--glass-focus);
  --color-good: var(--glass-good);
  --color-good-glass: var(--glass-good-bg);
  --color-bad: var(--glass-bad);
  --color-bad-glass: var(--glass-bad-bg);
  --color-warn: var(--glass-warn);
  --color-warn-glass: var(--glass-warn-bg);
  --color-scrim: var(--glass-scrim);
  --blur-glass: var(--glass-blur);
  --radius-glass: var(--glass-radius);
  --shadow-glass: var(--glass-shadow);
  --inset-shadow-glass: var(--glass-highlight);
  --animate-drift: g-drift 32s ease-in-out infinite alternate;
}
@keyframes g-drift { to { transform: translate3d(3vw,4vh,0) scale(1.06); } }

About this set

Four glass cards from the uiCookies glassmorphism UI kit, laid out side by side so you can see one design language across them. The content card has an illustrated cover, a tag chip, a linked headline, a short excerpt and an author line. The stat tile shows active subscribers with a large figure, a percentage change in a green chip, two small sub-figures and a sparkline whose meaning is repeated as visually hidden text. The profile card has an initials avatar, name and role, three counts in a description list and Follow and Message buttons. The pricing card has a Most popular chip, a large price, the billing note, a feature list with ticks and an accent trial button. All four use the same glass surface, so a frosted panel, a tinted chip and an accent button look the same wherever they appear. Small text on glass is set in the darker –glass-ink-soft rather than a pale grey, the delta chip has its own light background so green text keeps its contrast over any orb, and the captions above the cards sit on a frosted scrim. The Bootstrap version feeds the tokens into Bootstrap’s own component variables, and the Tailwind version maps them to theme utilities such as bg-glass, border-glass-edge, backdrop-blur-glass and text-ink.

What’s included

  • Content card with cover art, tag, headline link and byline
  • Stat tile with delta chip, sub-figures and a text alternative for the sparkline
  • Profile card with avatar, counts and two actions
  • Pricing card with a visible Most popular label and feature list
  • Same glass surface, chips and buttons across all four

Accessibility

Each card is an article with a heading, the headline is a real link with a visible focus outline, and decorative art, icons and the sparkline are hidden from assistive technology, with the trend repeated as visually hidden text. Counts use a description list. All text was measured at 4.5:1 against the worst orb colour behind the glass, and the Most popular label is text rather than colour alone.

Customise it

Change --glass-alpha and --glass-radius for the card surface, --glass-accent-bg for chips and buttons and --scene-1 for the avatar gradient. In Bootstrap the tokens feed --bs-card-bg, --bs-card-border-color and --bs-badge-* variables; in Tailwind edit bg-glass, rounded-glass and bg-accent-glass.