spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/filters/frosted-glass-card.html7  Desc   : Frosted glass card — backdrop blur over drifting color blobs + SVG grain8  ============================================================9-->10<!--svgarden11title: Frosted glass card12slug: frosted-glass-card13category: filters14tags: [filter, glass, backdrop, noise]15difficulty: advanced16techniques: [backdrop-filter, "feTurbulence (grain)", "@supports", SMIL-drift]17how_it_works: >18  Two saturated blobs drift behind the card on SMIL timers; the card itself19  paints nothing but a translucent white and lets backdrop-filter blur and20  saturate whatever passes underneath — that live refraction is what separates21  real glass from a static screenshot. A second SVG lays feTurbulence fractal22  noise over the card at 5% opacity, the micro-grain that makes frosted glass23  read as a material instead of a gradient. Everything sits behind an @supports24  gate: browsers without backdrop-filter get a more opaque card that stays25  perfectly legible, just not blurred.26support: >27  backdrop-filter needs Chrome 76+, Safari 9+ (-webkit-), Firefox 103+. Without28  it the card falls back to a solid translucent white via @supports.29customizable:30  - { var: "--sg-color",  label: "Blob A", type: color, default: "#7F77DD" }31  - { var: "--sg-color2", label: "Blob B", type: color, default: "#3E8ED0" }32  - { var: "--sg-size",   label: "Width",  type: range, min: 180, max: 380, default: 260, unit: px }33created: 2026-08-1034-->35<div class="sg-frosted-glass-card" style="--sg-color:#7F77DD; --sg-color2:#3E8ED0; --sg-size:260px;">36  <svg class="sg-frosted-glass-card-blobs" viewBox="0 0 260 170" aria-hidden="true" focusable="false">37    <circle class="sg-frosted-glass-card-blob1" cx="70" cy="60" r="55">38      <animate attributeName="cx" values="70;180;70" dur="9s" repeatCount="indefinite" />39      <animate attributeName="cy" values="60;110;60" dur="7s" repeatCount="indefinite" />40    </circle>41    <circle class="sg-frosted-glass-card-blob2" cx="190" cy="115" r="48">42      <animate attributeName="cx" values="190;80;190" dur="11s" repeatCount="indefinite" />43      <animate attributeName="cy" values="115;55;115" dur="8s" repeatCount="indefinite" />44    </circle>45  </svg>46  <div class="sg-frosted-glass-card-pane">47    <svg class="sg-frosted-glass-card-grain" aria-hidden="true" focusable="false">48      <filter id="sg-frosted-glass-card-noise">49        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" />50        <feColorMatrix type="saturate" values="0" />51      </filter>52      <rect width="100%" height="100%" filter="url(#sg-frosted-glass-card-noise)" />53    </svg>54    <strong>Frosted glass</strong>55    <span>blur happens live, behind the pane</span>56  </div>57</div>58<style>59  .sg-frosted-glass-card {60    position: relative;61    width: var(--sg-size);62    aspect-ratio: 26 / 17;63  }64  .sg-frosted-glass-card-blobs {65    position: absolute;66    inset: 0;67    width: 100%;68    height: 100%;69  }70  .sg-frosted-glass-card-blob1 { fill: var(--sg-color); }71  .sg-frosted-glass-card-blob2 { fill: var(--sg-color2); }72  .sg-frosted-glass-card-pane {73    position: absolute;74    inset: 14% 12%;75    border-radius: 14px;76    border: 1px solid rgba(255, 255, 255, 0.65);77    background: rgba(255, 255, 255, 0.62);78    color: #1c1c24;79    display: flex;80    flex-direction: column;81    justify-content: center;82    gap: 0.2em;83    padding: 1em 1.2em;84    overflow: hidden;85    font-family: inherit;86  }87  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {88    .sg-frosted-glass-card-pane {89      background: rgba(255, 255, 255, 0.28);90      -webkit-backdrop-filter: blur(12px) saturate(160%);91      backdrop-filter: blur(12px) saturate(160%);92    }93  }94  .sg-frosted-glass-card-grain {95    position: absolute;96    inset: 0;97    width: 100%;98    height: 100%;99    opacity: 0.05;100    pointer-events: none;101  }102  .sg-frosted-glass-card-pane strong { font-size: 1.05em; }103  .sg-frosted-glass-card-pane span { font-size: 0.8em; opacity: 0.72; }104</style>105