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

プリセット

ガラスエフェクト

ブラー強度 12px
透明度 0.15
角丸（ボーダー半径） 16px
ボーダー幅 1px
ボーダー透明度 0.30

カラー

カードの基本色
テキスト色

背景グラデーション

カラー1
カラー2
ダーク背景でプレビュー
backdrop-filter は Chrome 76+・Firefox 103+・Safari 9+・Edge 17+ で対応。古いSafari向けに -webkit-backdrop-filter も自動出力されます。

ガラスカード

すりガラスエフェクト

もっと見る
CSS 
Web制作の経費管理もかんたんに
freee会計なら、デザインツール・サーバー費用の経費精算もクラウドで一元管理。無料トライアル実施中。
freeeを無料で試す →
確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。
ボックスシャドウを生成 → CSSボックスシャドウジェネレーター
グラデーションを作成 → CSSグラデーションジェネレーター
ボタンをデザイン → CSSボタンジェネレーター