すりガラスのような半透明デザイン「ガラスモーフィズム」のCSSを、スライダー操作で直感的に生成できます。
ぼかし・透明度・枠線・影をリアルタイムに調整し、コードをワンクリックでコピーできます。
このツールは …回 使われています。
アプリの操作
背景グラデーションの文字コントラストを推定しています。
Background（プレビュー背景）
Presets
調整項目
コード出力
初期表示は背景も含む「HTML + CSS」です。コピーしたコードで背景の装飾も含む見本を再現できます。ガラスのプロパティだけ、またはクラス付きのCSSが必要な場合は形式を切り替えてください。
<div class="glass-wrap">
<div class="glass-deco glass-deco1" aria-hidden="true"></div>
<div class="glass-deco glass-deco2" aria-hidden="true"></div>
<div class="glass-deco glass-deco3" aria-hidden="true"></div>
<div class="glass-deco glass-deco4" aria-hidden="true"></div>
<div class="glass-card">
<strong class="glass-card-title">Glassmorphism</strong>
<span class="glass-card-text">すりガラスのような透け感のあるUI</span>
</div>
</div>
.glass-wrap {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 260px;
box-sizing: border-box;
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
background: linear-gradient(135deg, #F6D365 0%, #FDA085 100%);
}
.glass-deco {
position: absolute;
border-radius: 50%;
}
.glass-deco1 {
width: 150px;
height: 150px;
top: -34px;
left: 50%;
margin-left: -240px;
background: rgba(255, 255, 255, 0.4);
}
.glass-deco2 {
width: 110px;
height: 110px;
bottom: 4px;
left: 50%;
margin-left: 55px;
background: rgba(255, 255, 255, 0.3);
}
.glass-deco3 {
width: 70px;
height: 70px;
top: 18%;
right: -20px;
background: rgba(0, 0, 0, 0.18);
}
.glass-deco4 {
width: 96px;
height: 96px;
top: 50%;
left: 50%;
margin: -78px 0 0 -40px;
background: rgba(255, 255, 255, 0.45);
}
.glass-card {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 6px;
width: 78%;
max-width: 340px;
padding: 26px 20px;
text-align: center;
color: #1F2937;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.glass-card-title {
font-size: 20px;
font-weight: 700;
letter-spacing: 0.04em;
}
.glass-card-text {
font-size: 12.5px;
opacity: 0.85;
}
@media (max-width: 600px) {
.glass-wrap { height: 220px; }
.glass-card { width: 86%; padding: 20px 14px; }
}
ガラスモーフィズムとは？
ガラスモーフィズム（Glassmorphism／グラスモーフィズム）は、すりガラス越しに背景が透けて見えるような半透明の質感を持たせるUIデザイン手法です。macOSやiOS、Windows 11など、近年のOSデザインにも広く採用されています。
CSSでは backdrop-filter プロパティのぼかし（blur）を中心に、半透明の背景色・細い枠線・柔らかい影を組み合わせて表現します。デザインの考え方や実装のポイントは ガラスモーフィズムの実装解説ページ でも詳しく紹介しています。
使い方
- 「Background」でプレビュー背景を切り替えます。ガラスの見え方は背景によって大きく変わります。
- 「Presets」から近いイメージのガラスを選びます。
- スライダーでぼかし・不透明度・彩度・角丸・枠線・影を微調整します。
- 「Tint」でガラスの色味を変更できます。白が定番ですが、暗い色を選ぶとダークガラスになります。
- 仕上がったら「Copy」で選択中の形式をコピーします。「HTML + CSS」はHTML部分をページに、CSS部分をスタイルシートに貼り付けます。
CSSコードの使い方
「HTML + CSS」はHTML部分をページに、CSS部分をスタイルシートに貼り付けます。「プロパティのみ」と「クラス付き」はCSS欄に貼り付けてください。
.glass-card { background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); }
※ backdrop-filter は「要素の後ろにあるもの」をぼかすプロパティです。親要素や背景に画像・グラデーションなどがないと効果がわかりません。
※ Safari対応のため -webkit-backdrop-filter も併記しています。主要なモダンブラウザで動作します。
※ コピーしたコードは HTML・CSS・JSコードプレビューツール で動作確認できます。
きれいに見せるコツ
単色のベタ背景の上では効果がほとんど見えません。写真やグラデーションの上に置くのが基本です。
ぼかし（Blur）を強くするほど、背景色の不透明度（Opacity）は低めにすると上品に仕上がります。
白の細い枠線（1px）と柔らかい影を添えると、ガラス板のような立体感がぐっと増します。