backdrop-filter — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 backdrop-filter: the frosted-glass demo</h1>
    <p class="pg-sub">
      Drag the sliders and watch the glass panel. <code>backdrop-filter</code> blurs the
      colorful stripes <strong>behind</strong> the panel — but only if the panel's own
      background is see-through. Push <strong>Tint opacity</strong> to 100% and watch the
      blur vanish behind a flat color, even though it's still running underneath.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="wrap-controls">
        <div class="field grow">
          <span class="label">Blur radius — <span id="blurVal">20px</span></span>
          <input type="range" id="blur" min="0" max="40" value="20" step="1" />
        </div>
        <div class="field grow">
          <span class="label">Saturate — <span id="satVal">160%</span></span>
          <input type="range" id="sat" min="100" max="220" value="160" step="5" />
        </div>
        <div class="field grow">
          <span class="label">Tint opacity — <span id="alphaVal">55%</span></span>
          <input type="range" id="alpha" min="0" max="100" value="55" step="5" />
        </div>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="broken">😶 Broken (opaque)</button>
        <button class="btn sm" data-preset="fixed">✨ Frosted glass (fixed)</button>
        <button class="btn sm" data-preset="heavy">🌫️ Heavy glass</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="stage" id="stage">
        <div class="stage-caption">← this is what's "behind" the panel</div>
        <div class="glass" id="glass">
          <div>
            <div class="glass-label" id="glassLabel">Frosted panel</div>
            <div class="glass-sub" id="glassSub">background + backdrop-filter, live</div>
          </div>
        </div>
      </div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot good" id="dot"></span>
        <span id="statusText">Tinted and translucent — the stripes blur softly through the glass.</span>
      </div>
      <p class="hint" id="hint">
        Caption: at 55% tint opacity, enough of the blurred backdrop shows through to read as
        "frosted glass." That's the whole recipe — blur what's behind, then lay a soft, partly
        see-through color on top of it.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> The CSS this produces</div>
      <div class="code" id="codeOut"></div>
      <p class="hint">
        Notice: the moment <strong>Tint opacity</strong> hits 100%, this is <em>exactly</em> the
        broken snippet from the article — an opaque <code>background</code> sitting on top of a
        <code>backdrop-filter</code> that's still blurring, just where nobody can see it.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.