CSSグラスモーフィズム生成ツール

グラスモーフィズム(Glassmorphism)とは？

「Glassmorphism（グラスモーフィズム）」は、iOS（Apple）製品やmacOSのUIデザインで広く採用されたことをきっかけに、世界のWebデザインのトレンドとなった視覚効果テクニックです。 半透明の「すりガラス」のようなオブジェクトを配置することで、重なり（レイヤー）の階層構造をユーザーに直感的に伝えつつ、未来的で透明感のある洗練されたUIを構築することができます。

CSSでの実装の仕組み

この効果は、主にCSSの backdrop-filter: blur() プロパティを使用することで実現されます。 背景となる画像やグラデーションの上に、半透明の背景色（rgba）を持たせた要素を配置し、その後ろ側の景色を「ぼかす」ことで磨りガラスの質感を表現します。
さらに、細い半透明のボーダー（ border: 1px solid rgba(...) ）を付けることでガラスのフチの反射を表現し、淡いドロップシャドウ（ box-shadow ）を追加することで要素が浮いているような立体感を生み出すのが基本テクニックです。

本ジェネレーターの使い方

• テーマ選択: 白っぽいガラスか、黒っぽいガラスか（ダークモード用）をワンタップで切り替えられます。
• ぼかし (Blur): ガラスの曇り具合を調整します。数値が大きいほど背景がボヤけます。
• 透明度 (Opacity): ガラス自体の不透明度です。数値を下げると透け感が強くなります。
• 枠線 (Outline): ガラスのフチの光の反射を表現します。