グラスモーフィズムジェネレーター
リアルタイムプレビューでフロストガラスCSSエフェクトを作成します。
background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3);
おすすめのツール
役に立つかもしれない厳選されたツール
CSSですりガラス（グラスモーフィズム）効果を作る
概要
グラスモーフィズムはすりガラスの見た目 — 背景がやわらかく透けて見える半透明でぼかしたパネル — で、現代のOSが普及させました。CSSで再現するには、背景の透明度、背景ぼかし、控えめなボーダー、影をちょうどよく組み合わせます。このジェネレーターは各部をライブプレビューで調整し、正確なCSSをコピーするので、試行錯誤なしで効果が得られます。
使い方（ステップ）
- 1
透明度とぼかしを設定
背景の不透明度と背景ぼかしを調整し、ガラスのすり具合を調節します。
- 2
ボーダーと影を調整
控えめで明るいボーダーとやわらかい影を加え、パネルにガラスの縁と奥行きを与えます。
- 3
CSSをコピー
生成された規則を要素に貼り付けます。効果を見るには、カラフルまたは画像の背景の上に置いてください。
仕組み
この効果はいくつかのCSSプロパティを重ねます：半透明の背景色、要素の背後にあるものをぼかすbackdrop-filter: blur()、ガラスの「縁」を捉える細く明るいボーダー、奥行きのためのやわらかい影。背景の上のプレビューが結果を示す間、ぼかし・透明度・色をスライダーで調整し、生成された規則をスタイルシートにコピーします。
こんなときに使う
カラフルな背景や画像の上に浮くカード・ナビバー・モーダルをデザインするとき。UIに現代的で層のある奥行きを与えるとき。iOSやWindowsのすりガラス風スタイルに合わせるとき。背後のコンテンツを見せつつ読みやすいオーバーレイを作るとき。コードに固める前にガラス効果を試作するとき。backdrop-filterと透明度がどう組み合わさるか学ぶとき。
よくある質問
backdrop-filterは要素の背後のコンテンツだけをぼかすため、背後にカラフルなものか画像が必要です。真っ白な背景の上ではぼかす対象がありません。要素の背景が単色でなく半透明かも確認してください。
注意事項
backdrop-filterはGPU負荷が高く、1ページに多くのガラスパネルがあると、特にアニメーションやスクロール時に低スペック端末で描画が遅くなります。重要な要素に控えめに使ってください。