Frosted glass card

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/filters/frosted-glass-card.html
  Desc   : Frosted glass card — backdrop blur over drifting color blobs + SVG grain
  ============================================================
-->
<div class="sg-frosted-glass-card" style="--sg-color:#7F77DD; --sg-color2:#3E8ED0; --sg-size:260px;">
  <svg class="sg-frosted-glass-card-blobs" viewBox="0 0 260 170" aria-hidden="true" focusable="false">
    <circle class="sg-frosted-glass-card-blob1" cx="70" cy="60" r="55">
      <animate attributeName="cx" values="70;180;70" dur="9s" repeatCount="indefinite" />
      <animate attributeName="cy" values="60;110;60" dur="7s" repeatCount="indefinite" />
    </circle>
    <circle class="sg-frosted-glass-card-blob2" cx="190" cy="115" r="48">
      <animate attributeName="cx" values="190;80;190" dur="11s" repeatCount="indefinite" />
      <animate attributeName="cy" values="115;55;115" dur="8s" repeatCount="indefinite" />
    </circle>
  </svg>
  <div class="sg-frosted-glass-card-pane">
    <svg class="sg-frosted-glass-card-grain" aria-hidden="true" focusable="false">
      <filter id="sg-frosted-glass-card-noise">
        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" />
        <feColorMatrix type="saturate" values="0" />
      </filter>
      <rect width="100%" height="100%" filter="url(#sg-frosted-glass-card-noise)" />
    </svg>
    <strong>Frosted glass</strong>
    <span>blur happens live, behind the pane</span>
  </div>
</div>
<style>
  .sg-frosted-glass-card {
    position: relative;
    width: var(--sg-size);
    aspect-ratio: 26 / 17;
  }
  .sg-frosted-glass-card-blobs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .sg-frosted-glass-card-blob1 { fill: var(--sg-color); }
  .sg-frosted-glass-card-blob2 { fill: var(--sg-color2); }
  .sg-frosted-glass-card-pane {
    position: absolute;
    inset: 14% 12%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.62);
    color: #1c1c24;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2em;
    padding: 1em 1.2em;
    overflow: hidden;
    font-family: inherit;
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sg-frosted-glass-card-pane {
      background: rgba(255, 255, 255, 0.28);
      -webkit-backdrop-filter: blur(12px) saturate(160%);
      backdrop-filter: blur(12px) saturate(160%);
    }
  }
  .sg-frosted-glass-card-grain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05;
    pointer-events: none;
  }
  .sg-frosted-glass-card-pane strong { font-size: 1.05em; }
  .sg-frosted-glass-card-pane span { font-size: 0.8em; opacity: 0.72; }
</style>