デザイン / CSS
グラスモーフィズムCSSジェネレーター（すりガラス効果）
CSSのbackdrop-filterで、すりガラスの見た目を作成できます。カラフルなプレビュー上でぼかし、色合い、透明度、彩度、境界線、角丸を調整し、現行ブラウザで動作するCSSをコピーできます。
グラスモーフィズムCSSジェネレーター（すりガラス効果）: backdrop-filter: blur()は要素の背後にあるものをぼかし、saturate()はその色を鮮やかにします。半透明の背景がガラスに色合いを加え、薄い明色の境界線が本物のガラスのように縁を際立たせます。-webkit-付きの行は、バージョン18未満のSafariに対応します。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
CSS
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}この効果には、要素の背後に色のあるものが必要です。backdrop-filterは下にあるものをぼかし、半透明の背景を通して見せます。-webkit-の行は、バージョン18未満のSafari用です。ガラス上のテキストが背景のどの部分でも十分なコントラストを保っていることを確認してください。
アクセシビリティ
システム設定で透明度を下げる設定を有効にしているユーザーもいます。Chromiumベースのブラウザが対応するprefers-reduced-transparencyメディアクエリを使うと、そのユーザーにはガラスを不透明な背景に置き換えられます。
シャドウとの組み合わせ
柔らかく幅の広いシャドウを使うと、カードが背景から浮き上がって見えます。ボックスシャドウジェネレーターで調整し、box-shadowの行を置き換えてください。
使い方
- ぼかし、透明度、彩度を設定します。
- 色合い、境界線、角丸を選択します。
- CSSをコピーし、カラフルな背景の上に要素を配置します。
プライバシーと制限事項
すべての処理はブラウザ内で行われます。
関連ツール
よくある質問
ガラスが単調に見えるのはなぜですか？
背後にカラフルなものや細部のあるものが必要です。単色の上では、ぼかす対象がありません。
backdrop-filterは遅いですか？
ほとんどのCSSより処理負荷が高く、特に大きな領域が動くコンテンツ上をスクロールする場合に負荷がかかります。ぼかす領域を小さくし、多数の領域を重ねないようにしてください。
テキストは読みやすくなりますか？
確認してください。背景によってコントラストが変わります。より暗い色合い、強い透明度、またはテキストシャドウが役立ちます。
無料ツール · ブラウザ内で · アカウント不要