ブラー・透明度・ボーダー半径などを調整するだけで、すりガラス風CSSが即生成されます。コピーしてそのまま使えます。

プリセット

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

<div>
  <p class="gm-panel-title">ガラスエフェクト</p>
  <div class="gm-field">
    <div class="gm-label">ブラー強度 <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">透明度 <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">角丸（ボーダー半径） <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">ボーダー幅 <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">ボーダー透明度 <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">カラー</p>
  <div class="gm-color-row">
    <span class="gm-color-label">カードの基本色</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">テキスト色</span>
    <input type="color" id="gm-text-color" value="#ffffff">
  </div>
</div>

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

<div>
  <p class="gm-panel-title">背景グラデーション</p>
  <div class="gm-color-row">
    <span class="gm-color-label">カラー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">カラー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">ダーク背景でプレビュー</span>
</div>
backdrop-filter は Chrome 76+・Firefox 103+・Safari 9+・Edge 17+ で対応。古いSafari向けに -webkit-backdrop-filter も自動出力されます。
<!-- 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">ガラスカード</p>
    <p class="gm-card-inner-sub" id="gm-card-sub">すりガラスエフェクト</p>
    <span class="gm-card-btn" id="gm-card-btn">もっと見る</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()">CSSをコピー</button>
  </div>
  <pre id="gm-css-output"></pre>
</div>

Web制作の経費管理もかんたんに

freee会計なら、デザインツール・サーバー費用の経費精算もクラウドで一元管理。無料トライアル実施中。 freeeを無料で試す →

確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。

ボックスシャドウを生成 → CSSボックスシャドウジェネレーター グラデーションを作成 → CSSグラデーションジェネレーター ボタンをデザイン → CSSボタンジェネレーター