Glassmorphism Generator

カスタマイズ可能なぼかし、不透明度、ボーダーでフロストガラス UI エフェクトを作成。鮮やかな背景でライブプレビュー。

動作方法: ブラー、不透明度、ボーダー設定を調整してガラスエフェクトを作成します。プレビューは色付き背景での結果を表示します。完成したらCSSをコピーできます。

Glass Card
This is a glassmorphism effect with customizable blur, opacity, and border properties.
背景
#ffffff
15%
12px
180%
ボーダー
1px
20%
16px
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.20);

Glassmorphismとは

Glassmorphismは、CSS backdrop-filterを使用してフロストガラス効果を作成するUI設計トレンドです。要素が半透明に見え、ぼかされた背景が透けて見える事で、奥行きと視覚的階層構造が生まれます。AppleのmacOSおよびiOSデザインで人気化し、透明度、ブラー、微妙なボーダーを組み合わせています。

Glassmorphismエフェクトの作り方

主要なプロパティはbackdrop-filter: blur()（フロスト効果用）、半透明なbackground-color（色合い用）、そして微妙なボーダー（端の定義用）です。ブラー半径を調整して透明度を変更でき、background-saturationを使用してガラスの奥に見える色を強調できます。

Glassmorphismのブラウザサポート

backdrop-filterプロパティはChrome、Firefox、Safari、Edgeを含むすべてのモダンブラウザでサポートされています。古いブラウザの場合は、フォールバックとして単色の背景を用意してください。@supports (backdrop-filter: blur(1px))を使用してガラスエフェクトを条件付きで適用できます。

Glassmorphismデザインのコツ

  • 鮮やかなグラデーション背景で最高の視覚効果を得る
  • ブラーを8～20px程度に保ってガラスの後ろのテキストを読みやすくする
  • 微妙な白または明るいボーダーで端を定義する
  • テキストのコントラストはWCAGアクセシビリティガイドラインを満たす
  • 異なる不透明度のガラスパネルを複数レイヤーして奥行きを出す
  • 微妙なbox-shadowを組み合わせて追加の立体感を付ける