ガラスモーフィズム生成ツール｜すりガラス風CSSを自動生成

2026年7月10日

すりガラスのような半透明デザイン「ガラスモーフィズム」のCSSを、スライダー操作で直感的に生成できます。
ぼかし・透明度・枠線・影をリアルタイムに調整し、コードをワンクリックでコピーできます。

このツールは …回使われています。

Glassmorphism すりガラスのような透け感のあるUI

Background（プレビュー背景）

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);

Presets

Blur（ぼかし）: 12px

Opacity（背景色の不透明度）: 18%

Saturation（彩度）: 160%

Radius（角丸）: 16px

Border（枠線の不透明度）: 30%

Shadow（影の濃さ）: 25%

Tint（ガラスの色）

ガラスモーフィズムとは？

ガラスモーフィズム（Glassmorphism／グラスモーフィズム）は、すりガラス越しに背景が透けて見えるような半透明の質感を持たせるUIデザイン手法です。macOSやiOS、Windows 11など、近年のOSデザインにも広く採用されています。

CSSでは backdrop-filter プロパティのぼかし（blur）を中心に、半透明の背景色・細い枠線・柔らかい影を組み合わせて表現します。デザインの考え方や実装のポイントはガラスモーフィズムの実装解説ページでも詳しく紹介しています。

使い方

「Background」でプレビュー背景を切り替えます。ガラスの見え方は背景によって大きく変わります。
「Presets」から近いイメージのガラスを選びます。
スライダーでぼかし・不透明度・彩度・角丸・枠線・影を微調整します。
「Tint」でガラスの色味を変更できます。白が定番ですが、暗い色を選ぶとダークガラスになります。
仕上がったら「Copy」ボタンでCSSコードをコピーし、自分のサイトに貼り付けます。

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）と柔らかい影を添えると、ガラス板のような立体感がぐっと増します。

ご利用にあたっては、本Webアプリの利用規約も合わせてご確認ください。

バグや表示の乱れ、追加してほしい機能などがあれば、こちらよりお知らせください。

便利ツール一覧

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！