グラスモーフィズムジェネレーター

ガラスのような透明感のあるデザインを視覚的に作成。
CSSコードを即座にコピーして使用できます。

プレビュー

Glassmorphism

プリセット

パラメータ

CSS コード

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18);

グラスモーフィズムとは

グラスモーフィズムは、 ガラスのような透明感と質感を持つUIデザインスタイルです。 背景のぼかし効果（backdrop-filter）と半透明の背景色を組み合わせることで、 洗練された印象的なデザインを実現できます。

backdrop-filter: 要素の背後にある背景をぼかします。値が大きいほど強いぼかし効果になります。

背景の透明度: ガラス効果を作るため、背景色は半透明（20-40%程度）に設定するのが一般的です。

ボーダー: 薄く明るい色のボーダーを追加することで、ガラスのエッジ感を表現できます。

注意: backdrop-filterはモダンブラウザでサポートされていますが、 古いブラウザでは機能しない場合があります。