Generate frosted-glass CSS effects in seconds. Adjust blur, transparency, border radius, and more — then copy the ready-to-use CSS code.

Presets

<hr class="gm-section-divider">

<div>
  <p class="gm-panel-title">Glass Effect</p>
  <div class="gm-field">
    <div class="gm-label">Blur Amount <span id="gm-blur-val">12px</span></div>
    <input type="range" id="gm-blur" min="0" max="30" value="12">
  </div>
  <div class="gm-field" style="margin-top:12px;">
    <div class="gm-label">Transparency <span id="gm-alpha-val">0.15</span></div>
    <input type="range" id="gm-alpha" min="0" max="100" value="15">
  </div>
  <div class="gm-field" style="margin-top:12px;">
    <div class="gm-label">Border Radius <span id="gm-radius-val">16px</span></div>
    <input type="range" id="gm-radius" min="0" max="48" value="16">
  </div>
  <div class="gm-field" style="margin-top:12px;">
    <div class="gm-label">Border Width <span id="gm-bw-val">1px</span></div>
    <input type="range" id="gm-bw" min="0" max="6" value="1">
  </div>
  <div class="gm-field" style="margin-top:12px;">
    <div class="gm-label">Border Opacity <span id="gm-bopacity-val">0.30</span></div>
    <input type="range" id="gm-bopacity" min="0" max="100" value="30">
  </div>
</div>

<hr class="gm-section-divider">

<div>
  <p class="gm-panel-title">Colors</p>
  <div class="gm-color-row">
    <span class="gm-color-label">Card base color</span>
    <input type="color" id="gm-card-color" value="#ffffff">
  </div>
  <div class="gm-color-row" style="margin-top:10px;">
    <span class="gm-color-label">Text color</span>
    <input type="color" id="gm-text-color" value="#ffffff">
  </div>
</div>

<hr class="gm-section-divider">

<div>
  <p class="gm-panel-title">Background Gradient</p>
  <div class="gm-color-row">
    <span class="gm-color-label">Color 1</span>
    <input type="color" id="gm-bg1" value="#6366f1">
  </div>
  <div class="gm-color-row" style="margin-top:10px;">
    <span class="gm-color-label">Color 2</span>
    <input type="color" id="gm-bg2" value="#8b5cf6">
  </div>
</div>

<hr class="gm-section-divider">

<div class="gm-toggle-row">
  <label class="gm-toggle">
    <input type="checkbox" id="gm-dark-toggle">
    <span class="gm-toggle-slider"></span>
  </label>
  <span class="gm-toggle-text">Dark preview background</span>
</div>
backdrop-filter is supported in Chrome 76+, Firefox 103+, Safari 9+, Edge 17+. Prefix: -webkit-backdrop-filter for older Safari.
<!-- Preview -->
<div class="gm-preview-area" id="gm-preview-area">
  <div class="gm-backdrop-shapes">
    <div class="gm-shape gm-shape-1" id="gm-shape1"></div>
    <div class="gm-shape gm-shape-2" id="gm-shape2"></div>
    <div class="gm-shape gm-shape-3" id="gm-shape3"></div>
  </div>
  <div class="gm-glass-card" id="gm-glass-card">
    <p class="gm-card-inner-title" id="gm-card-title">Glass Card</p>
    <p class="gm-card-inner-sub" id="gm-card-sub">Frosted glass effect</p>
    <span class="gm-card-btn" id="gm-card-btn">Learn more</span>
  </div>
</div>

<!-- Code -->
<div class="gm-code-block">
  <div class="gm-code-header">
    <span class="gm-code-label">CSS</span>
    <button class="gm-copy-btn" id="gm-copy-btn" onclick="gmCopyCSS()">Copy CSS</button>
  </div>
  <pre id="gm-css-output"></pre>
</div>

Generate box shadows → Box Shadow Generator Create gradients → CSS Gradient Generator Build buttons → CSS Button Generator