Glassmorphism Widgets in CSS, Bootstrap & Tailwind

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="widgets">
<div><span class="lbl lbl--chip">Music player</span>
<section class="g-glass g-widget" aria-label="Now playing">
  <div class="g-player-top">
    <div class="g-cover" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V6l10-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="16.5" cy="16" r="2.5"/></svg></div>
    <div class="g-track"><h3>Night Drive</h3><p>Paloma Reyes · Coastline</p></div>
    <button type="button" class="g-icon-btn g-icon-btn--sm" aria-label="Add to favourites"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></button>
  </div>
  <input class="g-range" type="range" min="0" max="232" value="84" aria-label="Seek" aria-valuetext="1 minute 24 seconds of 3 minutes 52 seconds">
  <div class="g-times" aria-hidden="true"><span>1:24</span><span>3:52</span></div>
  <div class="g-controls">
    <button type="button" class="g-icon-btn" aria-label="Previous track"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 6h2v12H7zM19 6v12l-9-6z"/></svg></button>
    <button type="button" class="g-icon-btn g-icon-btn--accent g-icon-btn--lg" aria-label="Pause"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z"/></svg></button>
    <button type="button" class="g-icon-btn" aria-label="Next track"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M15 6h2v12h-2zM5 6v12l9-6z"/></svg></button>
  </div>
</section></div>
<div><span class="lbl lbl--chip">Weather widget</span>
<section class="g-glass g-widget" aria-labelledby="wx-city">
  <div class="g-wx-top"><div><h3 id="wx-city">Lisbon</h3><p>Friday 16 October</p></div><p>Updated 13:05</p></div>
  <div class="g-wx-now">
    <svg class="g-wx-big" viewBox="0 0 64 64" aria-hidden="true"><circle cx="24" cy="24" r="12" fill="#fbbf24"/><path class="g-cloud" d="M22 54h26a10 10 0 0 0 1.5-19.9A14 14 0 0 0 22.4 38 8 8 0 0 0 22 54z"/></svg>
    <p class="g-temp">21°</p>
    <p><b>Partly cloudy</b>High 24°, low 15°</p>
  </div>
  <ol class="g-hours" aria-label="Next five hours">
    <li><span>Now</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="9" r="3.2"/><path d="M9 2.8v1.4M3 9h1.4M4.8 4.8l1 1M13.2 4.8l-1 1M9.5 19.5h8a3.3 3.3 0 0 0 .4-6.6 4.6 4.6 0 0 0-8.8 1.2 2.7 2.7 0 0 0 .4 5.4z"/></svg><b>21°</b></li>
    <li><span>14:00</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/></svg><b>23°</b></li>
    <li><span>15:00</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/></svg><b>24°</b></li>
    <li><span>16:00</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 18.5h10a4 4 0 0 0 .6-8 5.5 5.5 0 0 0-10.7 1.4A3.3 3.3 0 0 0 7 18.5z"/></svg><b>22°</b></li>
    <li><span>17:00</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 15.5h10a4 4 0 0 0 .6-8 5.5 5.5 0 0 0-10.7 1.4A3.3 3.3 0 0 0 7 15.5zM8 18.5l-1 2.5M12 18.5l-1 2.5M16 18.5l-1 2.5"/></svg><b>19°</b></li>
  </ol>
  <dl class="g-wx-meta"><div><dt>Humidity</dt><dd>62%</dd></div><div><dt>Wind</dt><dd>14 km/h</dd></div><div><dt>UV index</dt><dd>4</dd></div></dl>
</section></div>
<div><span class="lbl lbl--chip">Mini calendar</span>
<section class="g-glass g-widget g-cal" aria-labelledby="cal-title">
  <div class="g-cal-head"><h3 id="cal-title">October 2026</h3><div>
    <button type="button" class="g-icon-btn g-icon-btn--sm" aria-label="Previous month"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg></button>
    <button type="button" class="g-icon-btn g-icon-btn--sm" aria-label="Next month"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg></button></div></div>
  <table aria-labelledby="cal-title">
    <thead><tr><th scope="col"><abbr title="Monday">Mo</abbr></th><th scope="col"><abbr title="Tuesday">Tu</abbr></th><th scope="col"><abbr title="Wednesday">We</abbr></th><th scope="col"><abbr title="Thursday">Th</abbr></th><th scope="col"><abbr title="Friday">Fr</abbr></th><th scope="col"><abbr title="Saturday">Sa</abbr></th><th scope="col"><abbr title="Sunday">Su</abbr></th></tr></thead>
    <tbody>
      <tr><td></td><td></td><td></td><td><span>1</span></td><td><span>2</span></td><td><span>3</span></td><td><span>4</span></td></tr>
      <tr><td><span>5</span></td><td><span>6</span></td><td><span>7</span></td><td class="g-ev"><span>8<span class="sr-only">, Design review</span></span></td><td><span>9</span></td><td><span>10</span></td><td><span>11</span></td></tr>
      <tr><td><span>12</span></td><td><span>13</span></td><td><span>14</span></td><td><span>15</span></td><td aria-current="date"><span>16<span class="sr-only">, today</span></span></td><td><span>17</span></td><td><span>18</span></td></tr>
      <tr><td><span>19</span></td><td><span>20</span></td><td class="g-ev"><span>21<span class="sr-only">, Sprint planning</span></span></td><td><span>22</span></td><td><span>23</span></td><td><span>24</span></td><td><span>25</span></td></tr>
      <tr><td><span>26</span></td><td class="g-ev"><span>27<span class="sr-only">, Quarterly report</span></span></td><td><span>28</span></td><td><span>29</span></td><td><span>30</span></td><td><span>31</span></td><td></td></tr>
    </tbody>
  </table>
  <p class="g-next"><i aria-hidden="true"></i><b>Sprint planning</b><span>Wed 21 Oct, 10:00</span></p>
</section></div>
<div><span class="lbl lbl--chip">Progress rings</span>
<section class="g-glass g-widget" aria-label="This week">
  <div class="g-rings">
    <div><div class="g-ring" aria-hidden="true"><svg viewBox="0 0 120 120"><circle class="g-ring-track" cx="60" cy="60" r="50"/><circle class="g-ring-bar" cx="60" cy="60" r="50" pathLength="100" stroke-dasharray="72 100"/></svg><b>72%</b></div>
      <h3>Weekly running goal</h3><p>72% done: 18 of 25 km</p></div>
    <div><div class="g-ring g-ring--good" aria-hidden="true"><svg viewBox="0 0 120 120"><circle class="g-ring-track" cx="60" cy="60" r="50"/><circle class="g-ring-bar" cx="60" cy="60" r="50" pathLength="100" stroke-dasharray="92 100"/></svg><b>92%</b></div>
      <h3>Sleep last night</h3><p>92%: 7 h 22 min of 8 h</p></div>
  </div>
</section></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}}
/* range slider: 3:1 track edge, accent thumb with a white ring */
.g-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
.g-range::-webkit-slider-runnable-track{height:10px;border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass-bg-control)}
.g-range::-moz-range-track{height:8px;border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass-bg-control)}
.g-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border:3px solid #fff;border-radius:50%;
  background:var(--glass-accent-bg);box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-range::-moz-range-thumb{width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:var(--glass-accent-bg);
  box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-range:focus-visible{outline:3px solid var(--glass-focus);outline-offset:4px;border-radius:999px}
/* media and widgets */
.g-widget{display:grid;gap:14px;align-content:start;padding:20px}
.g-widget h3{font-size:1.02rem;line-height:1.3}
/* music player */
.g-player-top{display:flex;align-items:center;gap:14px}
.g-cover{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:14px;background:var(--scene-1);color:#fff}
.g-cover svg{width:30px;height:30px}
.g-track{min-width:0;flex:1}
.g-track p{font-size:.85rem;color:var(--glass-ink-soft)}
.g-times{display:flex;justify-content:space-between;margin-top:-6px;font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--glass-ink-soft)}
.g-controls{display:flex;align-items:center;justify-content:center;gap:16px}
.g-icon-btn--sm{width:36px;height:36px}
.g-icon-btn--sm svg{width:16px;height:16px}
/* weather */
.g-wx-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.g-wx-top p{font-size:.85rem;color:var(--glass-ink-soft)}
.g-wx-now{display:flex;align-items:center;gap:14px}
.g-temp{font-size:3.4rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.g-wx-now p:not(.g-temp){font-size:.9rem;color:var(--glass-ink-soft)}
.g-wx-now b{display:block;font-size:1rem;color:var(--glass-ink)}
.g-wx-big{width:56px;height:56px;flex:none}
.g-wx-big .g-cloud{fill:#fff;stroke:var(--glass-ink-soft);stroke-width:2}
.g-hours{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0;padding:0;list-style:none}
.g-hours li{display:grid;justify-items:center;gap:4px;padding:10px 2px;border:1px solid var(--glass-border);border-radius:14px;background:var(--glass-bg-control);font-size:.8rem}
.g-hours li:first-child{border-color:transparent;background:var(--glass-accent-bg);color:var(--glass-on-accent)}
.g-hours span{color:inherit}
.g-hours b{font-size:.92rem}
.g-hours svg{width:22px;height:22px}
.g-wx-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;font-size:.8rem;text-align:center}
.g-wx-meta div{display:flex;flex-direction:column-reverse}
.g-wx-meta dt{color:var(--glass-ink-soft)}
.g-wx-meta dd{margin:0;font-weight:700;font-size:.92rem}
/* mini calendar */
.g-cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.g-cal-head div{display:flex;gap:6px}
.g-cal table{width:100%;border-collapse:collapse;text-align:center;font-size:.85rem;font-variant-numeric:tabular-nums}
.g-cal th{padding:0 0 6px;font-size:.72rem;font-weight:700;color:var(--glass-ink-soft)}
.g-cal abbr{text-decoration:none}
.g-cal td{padding:2px 0}
.g-cal td>span{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px}
.g-cal .g-ev>span::after{content:"";position:absolute;bottom:3px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--glass-accent)}
.g-cal [aria-current="date"]>span{background:var(--glass-accent-bg);color:var(--glass-on-accent);font-weight:700}
.g-cal [aria-current="date"]>span::after{background:var(--glass-on-accent)}
.g-next{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--glass-border);border-radius:14px;background:var(--glass-bg-control);font-size:.85rem}
.g-next i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--glass-accent)}
.g-next span{color:var(--glass-ink-soft)}
/* progress rings */
.g-rings{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center}
.g-ring{position:relative;width:min(100%,128px);aspect-ratio:1;margin:0 auto 8px}
.g-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.g-ring circle{fill:none;stroke-width:11}
.g-ring .g-ring-track{stroke:var(--glass-edge);stroke-opacity:.14}
.g-ring .g-ring-bar{stroke:var(--glass-accent);stroke-linecap:round;animation:g-fill 1s ease-out}
.g-ring--good .g-ring-bar{stroke:var(--glass-good)}
@keyframes g-fill{from{stroke-dasharray:0 100}}
.g-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.g-rings h3{font-size:.92rem}
.g-rings p{font-size:.82rem;color:var(--glass-ink-soft)}
@media (prefers-reduced-motion:reduce){.g-ring .g-ring-bar{animation:none}}

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="widgets">
<div><span class="lbl lbl--chip">Music player</span>
<section class="card g-glass" aria-label="Now playing"><div class="card-body g-widget">
  <div class="g-player-top">
    <div class="g-cover" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V6l10-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="16.5" cy="16" r="2.5"/></svg></div>
    <div class="g-track"><h3>Night Drive</h3><p>Paloma Reyes · Coastline</p></div>
    <button type="button" class="btn btn-glass btn-icon btn-sm rounded-circle" aria-label="Add to favourites"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></button>
  </div>
  <input class="form-range g-range" type="range" min="0" max="232" value="84" aria-label="Seek" aria-valuetext="1 minute 24 seconds of 3 minutes 52 seconds">
  <div class="g-times" aria-hidden="true"><span>1:24</span><span>3:52</span></div>
  <div class="g-controls">
    <button type="button" class="btn btn-glass btn-icon rounded-circle" aria-label="Previous track"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 6h2v12H7zM19 6v12l-9-6z"/></svg></button>
    <button type="button" class="btn btn-glass btn-glass-accent btn-icon btn-lg rounded-circle" aria-label="Pause"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z"/></svg></button>
    <button type="button" class="btn btn-glass btn-icon rounded-circle" aria-label="Next track"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M15 6h2v12h-2zM5 6v12l9-6z"/></svg></button>
  </div>
</div></section></div>
<div><span class="lbl lbl--chip">Weather widget</span>
<section class="card g-glass" aria-labelledby="wx-city"><div class="card-body g-widget">
  <div class="g-wx-top"><div><h3 id="wx-city">Lisbon</h3><p>Friday 16 October</p></div><p>Updated 13:05</p></div>
  <div class="g-wx-now">
    <svg class="g-wx-big" viewBox="0 0 64 64" aria-hidden="true"><circle cx="24" cy="24" r="12" fill="#fbbf24"/><path class="g-cloud" d="M22 54h26a10 10 0 0 0 1.5-19.9A14 14 0 0 0 22.4 38 8 8 0 0 0 22 54z"/></svg>
    <p class="g-temp">21°</p>
    <p><b>Partly cloudy</b>High 24°, low 15°</p>
  </div>
  <ol class="list-unstyled g-hours" aria-label="Next five hours">
    <li><span>Now</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="9" r="3.2"/><path d="M9 2.8v1.4M3 9h1.4M4.8 4.8l1 1M13.2 4.8l-1 1M9.5 19.5h8a3.3 3.3 0 0 0 .4-6.6 4.6 4.6 0 0 0-8.8 1.2 2.7 2.7 0 0 0 .4 5.4z"/></svg><b>21°</b></li>
    <li><span>14:00</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/></svg><b>23°</b></li>
    <li><span>15:00</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/></svg><b>24°</b></li>
    <li><span>16:00</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 18.5h10a4 4 0 0 0 .6-8 5.5 5.5 0 0 0-10.7 1.4A3.3 3.3 0 0 0 7 18.5z"/></svg><b>22°</b></li>
    <li><span>17:00</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 15.5h10a4 4 0 0 0 .6-8 5.5 5.5 0 0 0-10.7 1.4A3.3 3.3 0 0 0 7 15.5zM8 18.5l-1 2.5M12 18.5l-1 2.5M16 18.5l-1 2.5"/></svg><b>19°</b></li>
  </ol>
  <dl class="g-wx-meta"><div><dt>Humidity</dt><dd>62%</dd></div><div><dt>Wind</dt><dd>14 km/h</dd></div><div><dt>UV index</dt><dd>4</dd></div></dl>
</div></section></div>
<div><span class="lbl lbl--chip">Mini calendar</span>
<section class="card g-glass g-cal" aria-labelledby="cal-title"><div class="card-body g-widget">
  <div class="g-cal-head"><h3 id="cal-title">October 2026</h3><div>
    <button type="button" class="btn btn-glass btn-icon btn-sm rounded-circle" aria-label="Previous month"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg></button>
    <button type="button" class="btn btn-glass btn-icon btn-sm rounded-circle" aria-label="Next month"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg></button></div></div>
  <table class="table table-borderless" aria-labelledby="cal-title">
    <thead><tr><th scope="col"><abbr title="Monday">Mo</abbr></th><th scope="col"><abbr title="Tuesday">Tu</abbr></th><th scope="col"><abbr title="Wednesday">We</abbr></th><th scope="col"><abbr title="Thursday">Th</abbr></th><th scope="col"><abbr title="Friday">Fr</abbr></th><th scope="col"><abbr title="Saturday">Sa</abbr></th><th scope="col"><abbr title="Sunday">Su</abbr></th></tr></thead>
    <tbody>
      <tr><td></td><td></td><td></td><td><span>1</span></td><td><span>2</span></td><td><span>3</span></td><td><span>4</span></td></tr>
      <tr><td><span>5</span></td><td><span>6</span></td><td><span>7</span></td><td class="g-ev"><span>8<span class="visually-hidden">, Design review</span></span></td><td><span>9</span></td><td><span>10</span></td><td><span>11</span></td></tr>
      <tr><td><span>12</span></td><td><span>13</span></td><td><span>14</span></td><td><span>15</span></td><td aria-current="date"><span>16<span class="visually-hidden">, today</span></span></td><td><span>17</span></td><td><span>18</span></td></tr>
      <tr><td><span>19</span></td><td><span>20</span></td><td class="g-ev"><span>21<span class="visually-hidden">, Sprint planning</span></span></td><td><span>22</span></td><td><span>23</span></td><td><span>24</span></td><td><span>25</span></td></tr>
      <tr><td><span>26</span></td><td class="g-ev"><span>27<span class="visually-hidden">, Quarterly report</span></span></td><td><span>28</span></td><td><span>29</span></td><td><span>30</span></td><td><span>31</span></td><td></td></tr>
    </tbody>
  </table>
  <p class="g-next"><i aria-hidden="true"></i><b>Sprint planning</b><span>Wed 21 Oct, 10:00</span></p>
</div></section></div>
<div><span class="lbl lbl--chip">Progress rings</span>
<section class="card g-glass" aria-label="This week"><div class="card-body g-widget">
  <div class="g-rings">
    <div><div class="g-ring" aria-hidden="true"><svg viewBox="0 0 120 120"><circle class="g-ring-track" cx="60" cy="60" r="50"/><circle class="g-ring-bar" cx="60" cy="60" r="50" pathLength="100" stroke-dasharray="72 100"/></svg><b>72%</b></div>
      <h3>Weekly running goal</h3><p>72% done: 18 of 25 km</p></div>
    <div><div class="g-ring g-ring--good" aria-hidden="true"><svg viewBox="0 0 120 120"><circle class="g-ring-track" cx="60" cy="60" r="50"/><circle class="g-ring-bar" cx="60" cy="60" r="50" pathLength="100" stroke-dasharray="92 100"/></svg><b>92%</b></div>
      <h3>Sleep last night</h3><p>92%: 7 h 22 min of 8 h</p></div>
  </div>
</div></section></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}}
/* 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}}
/* range slider: 3:1 track edge, accent thumb with a white ring */
.g-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
.g-range::-webkit-slider-runnable-track{height:10px;border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass-bg-control)}
.g-range::-moz-range-track{height:8px;border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass-bg-control)}
.g-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border:3px solid #fff;border-radius:50%;
  background:var(--glass-accent-bg);box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-range::-moz-range-thumb{width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:var(--glass-accent-bg);
  box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px var(--glass-edge),0 2px 6px rgb(0 0 0 / .25)}
.g-range:focus-visible{outline:3px solid var(--glass-focus);outline-offset:4px;border-radius:999px}
/* media and widgets */
.g-widget{display:grid;gap:14px;align-content:start;padding:20px}
.g-widget h3{font-size:1.02rem;line-height:1.3}
/* music player */
.g-player-top{display:flex;align-items:center;gap:14px}
.g-cover{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:14px;background:var(--scene-1);color:#fff}
.g-cover svg{width:30px;height:30px}
.g-track{min-width:0;flex:1}
.g-track p{font-size:.85rem;color:var(--glass-ink-soft)}
.g-times{display:flex;justify-content:space-between;margin-top:-6px;font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--glass-ink-soft)}
.g-controls{display:flex;align-items:center;justify-content:center;gap:16px}
.g-icon-btn--sm{width:36px;height:36px}
.g-icon-btn--sm svg{width:16px;height:16px}
/* weather */
.g-wx-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.g-wx-top p{font-size:.85rem;color:var(--glass-ink-soft)}
.g-wx-now{display:flex;align-items:center;gap:14px}
.g-temp{font-size:3.4rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.g-wx-now p:not(.g-temp){font-size:.9rem;color:var(--glass-ink-soft)}
.g-wx-now b{display:block;font-size:1rem;color:var(--glass-ink)}
.g-wx-big{width:56px;height:56px;flex:none}
.g-wx-big .g-cloud{fill:#fff;stroke:var(--glass-ink-soft);stroke-width:2}
.g-hours{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0;padding:0;list-style:none}
.g-hours li{display:grid;justify-items:center;gap:4px;padding:10px 2px;border:1px solid var(--glass-border);border-radius:14px;background:var(--glass-bg-control);font-size:.8rem}
.g-hours li:first-child{border-color:transparent;background:var(--glass-accent-bg);color:var(--glass-on-accent)}
.g-hours span{color:inherit}
.g-hours b{font-size:.92rem}
.g-hours svg{width:22px;height:22px}
.g-wx-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;font-size:.8rem;text-align:center}
.g-wx-meta div{display:flex;flex-direction:column-reverse}
.g-wx-meta dt{color:var(--glass-ink-soft)}
.g-wx-meta dd{margin:0;font-weight:700;font-size:.92rem}
/* mini calendar */
.g-cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.g-cal-head div{display:flex;gap:6px}
.g-cal table{width:100%;border-collapse:collapse;text-align:center;font-size:.85rem;font-variant-numeric:tabular-nums}
.g-cal th{padding:0 0 6px;font-size:.72rem;font-weight:700;color:var(--glass-ink-soft)}
.g-cal abbr{text-decoration:none}
.g-cal td{padding:2px 0}
.g-cal td>span{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px}
.g-cal .g-ev>span::after{content:"";position:absolute;bottom:3px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--glass-accent)}
.g-cal [aria-current="date"]>span{background:var(--glass-accent-bg);color:var(--glass-on-accent);font-weight:700}
.g-cal [aria-current="date"]>span::after{background:var(--glass-on-accent)}
.g-next{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--glass-border);border-radius:14px;background:var(--glass-bg-control);font-size:.85rem}
.g-next i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--glass-accent)}
.g-next span{color:var(--glass-ink-soft)}
/* progress rings */
.g-rings{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center}
.g-ring{position:relative;width:min(100%,128px);aspect-ratio:1;margin:0 auto 8px}
.g-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.g-ring circle{fill:none;stroke-width:11}
.g-ring .g-ring-track{stroke:var(--glass-edge);stroke-opacity:.14}
.g-ring .g-ring-bar{stroke:var(--glass-accent);stroke-linecap:round;animation:g-fill 1s ease-out}
.g-ring--good .g-ring-bar{stroke:var(--glass-good)}
@keyframes g-fill{from{stroke-dasharray:0 100}}
.g-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.g-rings h3{font-size:.92rem}
.g-rings p{font-size:.82rem;color:var(--glass-ink-soft)}
@media (prefers-reduced-motion:reduce){.g-ring .g-ring-bar{animation:none}}
/* Bootstrap: .card-body carries .g-widget; reset Bootstrap's text margins inside */
.card-body.g-widget{padding:20px}
.g-widget :is(h3,p,dl,dd,ol,table){margin-bottom:0}
.g-widget dt{font-weight:400}
.g-widget h3{font-weight:700}
.g-cal .table{--bs-table-bg:transparent;--bs-table-color:var(--glass-ink);--bs-table-border-color:transparent}
.g-cal .table>:not(caption)>*>*{padding:2px 0}
.g-cal .table th{padding-bottom:6px}

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 flex max-w-[980px] flex-col gap-[26px]"><div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,400px),1fr))] items-start gap-[26px]">
<div class="flex flex-col items-start"><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">Music player</span>
<section class="border border-glass-border bg-glass text-ink shadow-glass inset-shadow-glass backdrop-blur-glass backdrop-saturate-150 rounded-glass grid content-start gap-3.5 self-stretch p-5" aria-label="Now playing">
  <div class="flex items-center gap-3.5">
    <div class="grid size-16 flex-none place-items-center rounded-[14px] bg-(image:--scene-1) text-white" aria-hidden="true"><svg class="size-[30px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V6l10-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="16.5" cy="16" r="2.5"/></svg></div>
    <div class="min-w-0 flex-1"><h3 class="text-[1.02rem] leading-[1.3] font-bold">Night Drive</h3><p class="text-[.85rem] text-ink-soft">Paloma Reyes · Coastline</p></div>
    <button type="button" class="inline-grid cursor-pointer place-items-center rounded-full border border-glass-edge bg-glass-control p-0 text-ink inset-shadow-glass backdrop-blur-glass transition-[background-color,scale] duration-200 hover:bg-glass-strong active:scale-96 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-focus motion-reduce:transition-none motion-reduce:active:scale-100 size-9" aria-label="Add to favourites"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></button>
  </div>
  <input class="range-glass rounded-full focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-focus" type="range" min="0" max="232" value="84" aria-label="Seek" aria-valuetext="1 minute 24 seconds of 3 minutes 52 seconds">
  <div class="-mt-1.5 flex justify-between text-[.78rem] text-ink-soft tabular-nums" aria-hidden="true"><span>1:24</span><span>3:52</span></div>
  <div class="flex items-center justify-center gap-4">
    <button type="button" class="inline-grid cursor-pointer place-items-center rounded-full border border-glass-edge bg-glass-control p-0 text-ink inset-shadow-glass backdrop-blur-glass transition-[background-color,scale] duration-200 hover:bg-glass-strong active:scale-96 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-focus motion-reduce:transition-none motion-reduce:active:scale-100 size-11" aria-label="Previous track"><svg class="size-[18px]" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 6h2v12H7zM19 6v12l-9-6z"/></svg></button>
    <button type="button" class="inline-grid cursor-pointer place-items-center rounded-full border border-transparent bg-accent-glass p-0 text-on-accent inset-shadow-glass backdrop-blur-glass transition-[filter,scale] duration-200 hover:brightness-[1.08] active:scale-96 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-focus motion-reduce:transition-none motion-reduce:active:scale-100 size-14" aria-label="Pause"><svg class="size-[22px]" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z"/></svg></button>
    <button type="button" class="inline-grid cursor-pointer place-items-center rounded-full border border-glass-edge bg-glass-control p-0 text-ink inset-shadow-glass backdrop-blur-glass transition-[background-color,scale] duration-200 hover:bg-glass-strong active:scale-96 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-focus motion-reduce:transition-none motion-reduce:active:scale-100 size-11" aria-label="Next track"><svg class="size-[18px]" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M15 6h2v12h-2zM5 6v12l9-6z"/></svg></button>
  </div>
</section></div>
<div class="flex flex-col items-start"><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">Weather widget</span>
<section class="border border-glass-border bg-glass text-ink shadow-glass inset-shadow-glass backdrop-blur-glass backdrop-saturate-150 rounded-glass grid content-start gap-3.5 self-stretch p-5" aria-labelledby="wx-city">
  <div class="flex items-start justify-between gap-3"><div><h3 class="text-[1.02rem] leading-[1.3] font-bold" id="wx-city">Lisbon</h3><p class="text-[.85rem] text-ink-soft">Friday 16 October</p></div><p class="text-[.85rem] text-ink-soft">Updated 13:05</p></div>
  <div class="flex items-center gap-3.5">
    <svg class="size-14 flex-none" viewBox="0 0 64 64" aria-hidden="true"><circle cx="24" cy="24" r="12" fill="#fbbf24"/><path class="fill-white stroke-ink-soft stroke-2" d="M22 54h26a10 10 0 0 0 1.5-19.9A14 14 0 0 0 22.4 38 8 8 0 0 0 22 54z"/></svg>
    <p class="text-[3.4rem] leading-none font-extrabold tracking-[-.04em]">21°</p>
    <p class="text-[.9rem] text-ink-soft"><b class="block text-base text-ink">Partly cloudy</b>High 24°, low 15°</p>
  </div>
  <ol class="grid grid-cols-5 gap-1.5" aria-label="Next five hours">
    <li class="grid justify-items-center gap-1 rounded-[14px] border border-transparent bg-accent-glass px-0.5 py-2.5 text-[.8rem] text-on-accent"><span>Now</span><svg class="size-[22px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="9" r="3.2"/><path d="M9 2.8v1.4M3 9h1.4M4.8 4.8l1 1M13.2 4.8l-1 1M9.5 19.5h8a3.3 3.3 0 0 0 .4-6.6 4.6 4.6 0 0 0-8.8 1.2 2.7 2.7 0 0 0 .4 5.4z"/></svg><b class="text-[.92rem]">21°</b></li>
    <li class="grid justify-items-center gap-1 rounded-[14px] border border-glass-border bg-glass-control px-0.5 py-2.5 text-[.8rem]"><span>14:00</span><svg class="size-[22px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/></svg><b class="text-[.92rem]">23°</b></li>
    <li class="grid justify-items-center gap-1 rounded-[14px] border border-glass-border bg-glass-control px-0.5 py-2.5 text-[.8rem]"><span>15:00</span><svg class="size-[22px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/></svg><b class="text-[.92rem]">24°</b></li>
    <li class="grid justify-items-center gap-1 rounded-[14px] border border-glass-border bg-glass-control px-0.5 py-2.5 text-[.8rem]"><span>16:00</span><svg class="size-[22px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 18.5h10a4 4 0 0 0 .6-8 5.5 5.5 0 0 0-10.7 1.4A3.3 3.3 0 0 0 7 18.5z"/></svg><b class="text-[.92rem]">22°</b></li>
    <li class="grid justify-items-center gap-1 rounded-[14px] border border-glass-border bg-glass-control px-0.5 py-2.5 text-[.8rem]"><span>17:00</span><svg class="size-[22px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 15.5h10a4 4 0 0 0 .6-8 5.5 5.5 0 0 0-10.7 1.4A3.3 3.3 0 0 0 7 15.5zM8 18.5l-1 2.5M12 18.5l-1 2.5M16 18.5l-1 2.5"/></svg><b class="text-[.92rem]">19°</b></li>
  </ol>
  <dl class="grid grid-cols-3 gap-2 text-center text-[.8rem]"><div class="flex flex-col-reverse"><dt class="text-ink-soft">Humidity</dt><dd class="text-[.92rem] font-bold">62%</dd></div><div class="flex flex-col-reverse"><dt class="text-ink-soft">Wind</dt><dd class="text-[.92rem] font-bold">14 km/h</dd></div><div class="flex flex-col-reverse"><dt class="text-ink-soft">UV index</dt><dd class="text-[.92rem] font-bold">4</dd></div></dl>
</section></div>
<div class="flex flex-col items-start"><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">Mini calendar</span>
<section class="border border-glass-border bg-glass text-ink shadow-glass inset-shadow-glass backdrop-blur-glass backdrop-saturate-150 rounded-glass grid content-start gap-3.5 self-stretch p-5" aria-labelledby="cal-title">
  <div class="flex items-center justify-between gap-2.5"><h3 class="text-[1.02rem] leading-[1.3] font-bold" id="cal-title">October 2026</h3><div class="flex gap-1.5">
    <button type="button" class="inline-grid cursor-pointer place-items-center rounded-full border border-glass-edge bg-glass-control p-0 text-ink inset-shadow-glass backdrop-blur-glass transition-[background-color,scale] duration-200 hover:bg-glass-strong active:scale-96 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-focus motion-reduce:transition-none motion-reduce:active:scale-100 size-9" aria-label="Previous month"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg></button>
    <button type="button" class="inline-grid cursor-pointer place-items-center rounded-full border border-glass-edge bg-glass-control p-0 text-ink inset-shadow-glass backdrop-blur-glass transition-[background-color,scale] duration-200 hover:bg-glass-strong active:scale-96 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-focus motion-reduce:transition-none motion-reduce:active:scale-100 size-9" aria-label="Next month"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg></button></div></div>
  <table class="w-full border-collapse text-center text-[.85rem] tabular-nums" aria-labelledby="cal-title">
    <thead class="text-[.72rem] font-bold text-ink-soft [&_abbr]:no-underline [&_th]:pb-1.5"><tr><th scope="col"><abbr title="Monday">Mo</abbr></th><th scope="col"><abbr title="Tuesday">Tu</abbr></th><th scope="col"><abbr title="Wednesday">We</abbr></th><th scope="col"><abbr title="Thursday">Th</abbr></th><th scope="col"><abbr title="Friday">Fr</abbr></th><th scope="col"><abbr title="Saturday">Sa</abbr></th><th scope="col"><abbr title="Sunday">Su</abbr></th></tr></thead>
    <tbody>
      <tr><td class="py-0.5"></td><td class="py-0.5"></td><td class="py-0.5"></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">1</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">2</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">3</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">4</span></td></tr>
      <tr><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">5</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">6</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">7</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px] after:absolute after:bottom-[3px] after:left-1/2 after:-ml-[2.5px] after:size-[5px] after:rounded-full after:bg-accent after:content-['']">8<span class="sr-only">, Design review</span></span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">9</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">10</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">11</span></td></tr>
      <tr><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">12</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">13</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">14</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">15</span></td><td class="py-0.5" aria-current="date"><span class="relative inline-grid size-8 place-items-center rounded-[10px] bg-accent-glass font-bold text-on-accent">16<span class="sr-only">, today</span></span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">17</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">18</span></td></tr>
      <tr><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">19</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">20</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px] after:absolute after:bottom-[3px] after:left-1/2 after:-ml-[2.5px] after:size-[5px] after:rounded-full after:bg-accent after:content-['']">21<span class="sr-only">, Sprint planning</span></span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">22</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">23</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">24</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">25</span></td></tr>
      <tr><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">26</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px] after:absolute after:bottom-[3px] after:left-1/2 after:-ml-[2.5px] after:size-[5px] after:rounded-full after:bg-accent after:content-['']">27<span class="sr-only">, Quarterly report</span></span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">28</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">29</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">30</span></td><td class="py-0.5"><span class="relative inline-grid size-8 place-items-center rounded-[10px]">31</span></td><td class="py-0.5"></td></tr>
    </tbody>
  </table>
  <p class="flex items-center gap-2.5 rounded-[14px] border border-glass-border bg-glass-control px-3 py-2.5 text-[.85rem]"><i class="size-2 flex-none rounded-full bg-accent" aria-hidden="true"></i><b>Sprint planning</b><span class="text-ink-soft">Wed 21 Oct, 10:00</span></p>
</section></div>
<div class="flex flex-col items-start"><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">Progress rings</span>
<section class="border border-glass-border bg-glass text-ink shadow-glass inset-shadow-glass backdrop-blur-glass backdrop-saturate-150 rounded-glass grid content-start gap-3.5 self-stretch p-5" aria-label="This week">
  <div class="grid grid-cols-2 gap-3 text-center">
    <div><div class="relative mx-auto mb-2 aspect-square w-[min(100%,128px)]" aria-hidden="true"><svg class="block size-full -rotate-90 fill-none stroke-[11]" viewBox="0 0 120 120"><circle class="stroke-glass-edge [stroke-opacity:.14]" cx="60" cy="60" r="50"/><circle class="stroke-accent motion-safe:animate-fill" stroke-linecap="round" cx="60" cy="60" r="50" pathLength="100" stroke-dasharray="72 100"/></svg><b class="absolute inset-0 grid place-items-center text-[1.6rem] font-extrabold tracking-[-.02em]">72%</b></div>
      <h3 class="text-[.92rem] font-bold">Weekly running goal</h3><p class="text-[.82rem] text-ink-soft">72% done: 18 of 25 km</p></div>
    <div><div class="relative mx-auto mb-2 aspect-square w-[min(100%,128px)]" aria-hidden="true"><svg class="block size-full -rotate-90 fill-none stroke-[11]" viewBox="0 0 120 120"><circle class="stroke-glass-edge [stroke-opacity:.14]" cx="60" cy="60" r="50"/><circle class="stroke-good motion-safe:animate-fill" stroke-linecap="round" cx="60" cy="60" r="50" pathLength="100" stroke-dasharray="92 100"/></svg><b class="absolute inset-0 grid place-items-center text-[1.6rem] font-extrabold tracking-[-.02em]">92%</b></div>
      <h3 class="text-[.92rem] font-bold">Sleep last night</h3><p class="text-[.82rem] text-ink-soft">92%: 7 h 22 min of 8 h</p></div>
  </div>
</section></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); } }
/* range track and thumb: pseudo-elements, kept as one utility */
@utility range-glass {
  appearance: none; display: block; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
  &::-webkit-slider-runnable-track { height: 10px; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass-bg-control); }
  &::-moz-range-track { height: 8px; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass-bg-control); }
  &::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; margin-top: -8px; border: 3px solid #fff; border-radius: 50%; background: var(--glass-accent-bg); box-shadow: 0 0 0 1px var(--glass-edge), 0 2px 6px rgb(0 0 0 / .25); }
  &::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: var(--glass-accent-bg); box-shadow: 0 0 0 1px var(--glass-edge), 0 2px 6px rgb(0 0 0 / .25); }
}
@theme { --animate-fill: g-fill 1s ease-out; }
@keyframes g-fill { from { stroke-dasharray: 0 100; } }

About this set

Media and dashboard widgets from the uiCookies glassmorphism UI kit: a mini music player, a weather widget, a mini calendar and a pair of progress rings. The music player shows cover art, the track and artist, a favourite button, a seek slider with elapsed and total time, and previous, pause and next controls. The weather widget shows Lisbon at 21 degrees, partly cloudy, with an hourly strip for the next five hours and humidity, wind and UV figures. The calendar is a real table for October 2026 with today highlighted, dots on days with events and the next event underneath. The progress rings show a weekly running goal and last night’s sleep, each with its value in the centre and a caption. Widgets are the classic glassmorphism showcase, and also where accessibility usually slips. Here the seek slider has an aria-valuetext in minutes and seconds, event dots carry visually hidden event names, today is marked with aria-current=”date”, and the ring values are written out as text rather than left to the drawing. The rings are SVG circles with pathLength=”100″, so the dash array is simply the percentage. 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

Music player with a seek slider and labelled transport buttons
Weather widget with an hourly strip and conditions
Mini calendar built as a real table with today and events marked
SVG progress rings driven by a single percentage
No JavaScript

Accessibility

Transport buttons and calendar arrows have aria-labels, the seek slider has an aria-valuetext such as 1 minute 24 seconds of 3 minutes 52 seconds, the calendar has column headers with full day names and marks today with aria-current="date", and event days carry visually hidden event names. Rings and icons are decorative because their values are written as text. All text was measured at 4.5:1, and the ring fill animation stops under prefers-reduced-motion.

Customise it

Change --glass-accent for the ring, sparkline and event dots, --glass-good for the second ring and --scene-1 for the cover art. In Bootstrap the widgets sit in .card bodies and the calendar uses .table; in Tailwind edit stroke-accent, bg-accent-glass and the h-[n%] values.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Glassmorphism