CSSすりガラス効果ジェネレーター

Bogdan Sandu (EN) 著 · 公開 2025 年 6 月 9 日 · 最終更新日 2026 年 9 月 13 日

このCSSグラスモーフィズム生成ツールは、4つのスライダーですりガラス風の効果を作り、対応するCSSを出力します。プレビューでは、同じ設定をカードとモーダルに適用して確認できます。背景に浮かぶ図形があるため、ぼかしの効果も見て取れます。

設定できる内容:

• 0 ピクセルから 20 ピクセルまでのぼかし。半径は backdrop-filter: blur() に渡されます。
• 0 から 1 までの透明度、白いパネルの背景のアルファ チャネル
• 0px から 5px までのアウトライン (半透明の白い境界線の幅)
• 100% から 200% までの彩度。saturate() を通じて適用され、ガラスの背後の色がより強く表現されます。

開始点となる 3 つのプリセットは、微妙 (5 ピクセルのぼかし、0.2 アルファ)、太字 (15 ピクセルのぼかし、0.4 アルファ、2 ピクセルの輪郭)、およびつや消し (20 ピクセルのぼかし、0.1 アルファ、輪郭なし) です。 シャッフルはランダムな値を選択し、リセットはデフォルトに戻し、コピーはCSSをクリップボードに置きます。すべてがブラウザ内で実行されます。

この CSSグラスモーフィズム生成ツール の使用方法

1. プリセットをクリックするか、カードとモーダルのプレビューが正しく表示されるまで 4 つのスライダーをドラッグします。
2. カード内のテキストに注目してください。読みにくい場合は、ぼかしを下げるか、透明度の値を上げてください。
3. [コピー] をクリックし、パネル、カード、またはナビゲーション バーのルールにブロックを貼り付けます。
4. 要素がグラデーションまたは画像の上にあることを確認してください。平らな色の上では、ぼかしには何も表示されません。

デフォルト値を使用すると、ジェネレーターは次のように出力します。

.glass-panel {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

セレクターはあなたが追加します。このツールは宣言のみをコピーするため、宣言は既存のルールに組み込まれます。

ツールでできないこと

• パネルの色は常に白です。色付きガラスの場合、rgba(255, 255, 255, …) の最初の 3 つの数字をブランド カラーに変更します。 HEX から RGB コンバータにより、チャネル値が得られます。
• 枠線の色、角の半径、影は rgba(255, 255, 255, 0.3)、16px、0 4px 30px rgba(0, 0, 0, 0.1) に固定されます。その後、CSS border-radius生成ツール と CSS box-shadow生成ツール を使用して調整します。
• It exports plain CSS only, no SCSS or Tailwind.デフォルト値は、Tailwind の backdrop-blur-[10px] backdrop-saturate-[1.8] bg-white/30 border border-white/30 rounded-2xl にマップされます。
• フォールバックは追加されません。 backdrop-filter (EN) のないブラウザの場合は、不透明な背景を @supports (EN) ブロックを使用します。

CSS Glassmorphism Generatorとは何ですか?

CSS グラスモーフィズム ジェネレーターは、 スライダーの入力をすりガラスのインターフェイス効果のためにすぐに使用できる CSS に変換するブラウザベースのツールです。

グラスモーフィズム (EN)という外観自体は、その後ろにあるものをぼかす半透明のパネルである本物のガラスから名前を借りています。 Hype4.Academy の Michal Malewicz は、2020 年 11 月に公開された記事 (EN)でこの用語を生み出しました。これが定着したのは、散在するビジュアル トレンドに単一の検索可能な名前を与えたからです。

スライダーのドラッグをやめると、ジェネレーターは何を返しますか。

• サンプルの背景に対するガラス パネルのライブ プレビュー
• コピー可能な CSS、またはいくつかのツールの Tailwind クラス
• ぼかし、透明度、境界線、場合によってはコーナーの半径を調整できるコントロール

静的なモックアップ (EN)からぼかしと不透明度の値を確認する代わりに、いくつかのスライダーをドラッグして、結果のコードをコピーします。 rgba アルファ チャネルを手動で計算したり、ブラー半径を推測したりする必要はありません。

これを含むほとんどのツールは、プレーンな CSS をエクスポートします。数値が小さいほど、代わりに Tailwind ユーティリティ クラスまたは SCSS 変数が返されます。これは、ワークフローを選択する際に重要になります。

Glassmorphism 効果を生み出す CSS プロパティは何ですか?

ガラスの外観を構築するには、背景フィルター、半透明の背景色、微妙な境界線、ボックス シャドウの 4 つの CSS プロパティを組み合わせます。

4 つのうちのいずれかをドロップすると、効果はガラスではなく平らになります。特に背景フィルターをドロップすると、ぼかしがまったくなくなり、ただシースルーのボックスが表示されます。

背景フィルターとぼかし半径

コア プロパティ: backdrop-filter (EN) は、最も一般的なフィルター関数として blur() を使用して、要素の背後にあるペイントされた領域をぼかします。

• 低ブラー (約 5 ピクセルから 8 ピクセル): 背景はパネルを通して部分的に読み取れるままです。
• 中間ブラー (約 10 ピクセルから 16 ピクセル): ほとんどのジェネレーターで共通のデフォルト
• 高いぼかし (20 ピクセル以上): 背景が柔らかい色に溶けます。

古い Safari バージョンでは、-webkit-backdrop-filter としてプロパティを複製する必要があります。これは、このジェネレーターを含むほとんどのジェネレーターが自動的に追加するベンダー プレフィックスです。

背景色とアルファ透明度

アルファ値: 背景色は rgba() または hsla() を介して実行されるため、パネルの色は単色ではなくシースルーのままになります。

ブランドカラーを適切なアルファチャンネルを使用して 16 進数から rgba 値に変換するのは面倒な部分です。 HEX から RGB コンバータを使用すると、手動による計算が不要になります。

ほとんどのジェネレーターのデフォルトのアルファ値は 0.1 ～ 0.3 の間です。 0.4 を超えると、パネルはガラスのように見えなくなり、色付きの窓のように見え始めます。

ボーダーとシャドウのレイヤー化

ガラス エッジ: 明るい半透明の白の 1 ピクセルの境界線は、本物のガラスに見られる反射縁を模倣します。

Box-shadow does the rest of the work.ソフト ドロップ シャドウを追加すると、パネルが背景と同じ高さではなく、背景の上に浮かんでいるように見えます。影を個別に作成している場合は、CSS ボックス シャドウ ジェネレーター がオフセットとブラー半径の計算を処理します。

影をスキップすると、パネルが貼り付けられたように見えます。境界線をスキップすると、エッジはその後ろにあるものに消えます。

ガラス要素が機能するにはどのような背景が必要ですか?

ガラス風パネルの背後には、グラデーションや画像など、変化のあるレイヤーが必要です。単一のベタ塗り色だけでは、ぼかして広げる情報がないためです。

パネルの背後に滑らかな CSS グラデーション (EN)を生成することは、ぼかしに効果を与えるための信頼できる方法の 1 つです。マルチストップのグラデーションは、濁ったというよりも意図的に見える柔らかい色の変化にぼかされます。

Apple 自身のこの外観の展開は、まさにこの要件に依存していました。 macOS Big Sur は 2020 年 11 月 12 日に出荷されました (EN)。半透明のメニュー バーと色が変化するダイナミックな壁紙が組み合わされています。これらの壁紙は、ぼかしに動きのある質感を与えます。

無地の白または単色の背景の上に同じガラス パネルを置くと、効果が均一になります。ぼかしを拡散させるものが何もないので、パネルはわずかに霧のかかった長方形のように見えます。

何がうまくいき、何がうまくいかないのか:

• 作品: 写真、マルチストップ グラデーション、カラフルなアプリのスクリーンショット
• うまく機能しない: 単色のブランドカラー、無地の白または白に近い背景

どのブラウザが背景フィルターをサポートしていますか?

Backdrop-filter は現在すべての主要なブラウザで動作しますが、プレフィックスなしの完全なサポートが全面的に提供されるまでには何年もかかりました。

同じガラスの外観をどこでも同じようにレンダリングすることは、以前は CSS における厄介なブラウザ間の互換性 (EN)問題の 1 つでした。そのギャップはほぼ埋まりました。

Web プラットフォーム ベースライン トラッカー (EN) および caniuse (EN) データごとの主要な数値:

• Chrome では、2019 年 7 月リリースの Chrome 76 (EN) 以降、プレフィックスなしの背景フィルタが出荷されました。
• Firefox は、2022 年 7 月 26 日にリリースされた Firefox 103 (EN) でプレフィックスなしのサポートを追加しました。
• Safari は、2024 年 9 月 16 日にリリースされた Safari 18 (EN) で -webkit- プレフィックス要件を削除しました。
• backdrop-filter は、2024 年 9 月 16 日にベースラインの「新規利用可能」ステータスに達し、2027 年 3 月 16 日までに「広く利用可能」ステータスになる予定です

Internet Explorer はプロパティをまったく追加しませんでした。これは、トラフィックにまだプロパティが含まれている場合にのみ問題になります。

Safari の WebKit プレフィックス要件

古い Safari および古い iOS WebView では、Safari 18 のリリース後でも、-webkit- プレフィックスが必要です。 CSS にはプレフィックスなしのバージョンのみではなく、両方の行を保持します。

プレフィックスを完全に削除すると、2024 年より前の Safari 訪問者は、設定したフォールバック背景色にかかわらず、まったくぼかされなくなります。

Glassmorphism が機能しない場合は?

Glassmorphism はコードではなくコントラストで失敗することがほとんどです。ぼやけた混雑した背景に対してガラス パネル上のテキストが読めない場合、その効果はユーザビリティに悪影響を及ぼします。

コントラストとアクセシビリティの制限

ウェブ コンテンツ アクセシビリティ ガイドラインでは、カラー コントラスト (EN)の最小値を、通常の本文テキストの 4.5:1 (EN) に設定しています。混雑した写真の上に半透明のパネルが置かれていると、特に明るくぼやけた背景に明るいテキストが表示されている場合、その制限をすぐに超えてしまいます。

出荷前にガラスとテキストの色をアクセシブルなカラー パレット ジェネレーターで実行すると、1 台のモニターで確認するよりも早くこの問題を発見できます。

実際にこれが壊れる一般的な方法は次のとおりです。

• 低コントラストのテキスト: 明るくぼやけた背景上の白いテキストは、明るいセクションを過ぎてスクロールすると数秒以内に消えます
• テキスト密度の高いインターフェース: ダッシュボードとデータ テーブルは、美観から得られるものよりも、読み取り不能な行によって失われるものの方が多いです。
• 古いブラウザ: 2022 年より前の Firefox と 2024 年より前の Safari のプレフィックスのないルールは、ページ全体の視覚的なバランスを変更する、ぼやけのないフラットなパネルをレンダリングします。

モバイルデバイスのパフォーマンスコスト

背景フィルターは無料でレンダリングできません。ぼやけたパネルごとにブラウザはその下のレイヤーを再描画する必要があり、1 つの画面に複数のガラス パネルを重ねるとコストがかかります。

GPU が弱い低予算の Android スマートフォンでは、これを最初に感じます。通常は、目に見える不具合ではなく、スクロール中のフレーム落ちとして感じられます。 1 枚のガラスパネルで問題が発生することはほとんどありません。

1 つのダッシュボードに 5 つまたは 6 つ積み上げられ、スクロールすると更新される場合は別の話になります。

どの CSSグラスモーフィズム生成ツール ツールを使用する必要がありますか?

ここには 3 つの実際のパスが存在します。glassmorphism.com (EN) などの専用ジェネレーター、css.glass (EN) などの軽量な代替手段、または 4 つのプロパティを自分でハンドコーディングする方法です。このページは 2 番目のグループに属します。

glassmorphism.com は、サイト独自の利用者数から、137 か国の 250,000 人のユーザーにリーチしていると推定しています。これは、人々がゼロから値を記述する代わりにジェネレーターに手を伸ばす頻度について何かを物語っています。

スライダーに触れる前に外観の範囲を確認したい場合は、ジェネレーター内で試行錯誤するよりも、手書きスタイルの CSS グラスモーフィズムの例 (EN)のギャラリーをスクロールするほうが高速です。

3 つの釘のすべての角の半径はどれも、箱から出してまっすぐに見えるものはありません。最終的な磨きをかけるために、エクスポートされたコードを専用の CSS 境界線半径ジェネレーターと組み合わせるのが一般的です。

Microsoft は、関連するアイデアを別の名前で実行しています。 Windows 11 の Fluent Design システムでは、アクリル素材 (EN)を使用して、同じ半透明のレイヤードの外観を実現していますが、別のオペレーティング システム用に調整されています。

未加工の CSS、SCSS、または Tailwind クラスをエクスポートする必要がありますか?

適切なエクスポート形式は、どちらがより高度に見えるかではなく、スタックによって異なります。生の CSS はあらゆるプロジェクトに適合します。 SCSS は、すでにプリプロセッサを使用しているチームに適しており、Tailwind クラスは、ユーティリティ優先のスタイルを中心にすでに構築されているプロジェクトに適しています。

生のCSS

最も移植性の高いオプション: エクスポートされたコードをスタイルシートに直接貼り付けるだけで機能し、ビルド ステップや依存関係は必要ありません。

ページ上のファイル サイズが重要な場合は、運用環境に送信する前に、CSS ミニファイア (EN)を介して実行します。

• 次の場合に効果的です: プロジェクトにビルド パイプラインがない、またはガラス効果が 1 つまたは 2 つの要素にのみ表示される
• 変数の再利用がないため、同じ値を 12 個のコンポーネント間で繰り返す必要がある場合に摩擦が生じます。

SCSS

• 次の場合にうまく機能します: プロジェクトがすでに Sass をコンパイルしており、ガラス パネルがわずかな違いで繰り返し表示される
• 次の場合に摩擦が生じます: 変数のためだけにビルド ステップを追加するのは過剰であるため、プロジェクトにビルド ステップがない

SCSS 変数とミックスインは、4 つのガラス プロパティを 1 つの再利用可能なブロックに変換します。サイト全体でぼかし半径を変更すると、数十行ではなく 1 行を編集することになります。

この再利用が、ここで未加工の CSS ではなく SCSS を選択する理由のすべてです。

Tailwind CSS

プロジェクトがすでに Tailwind (EN) のユーティリティ クラスに依存している場合、ぼかしと不透明度の値を Tailwind の backdrop-blur (EN) と任意の値の構文に変換すると、すべてが 1 つのシステム内に保持されます。スタイルを 2 つに分割します。

• 以下の場合にうまく機能します: インターフェースの残りの部分がすでに Tailwind ユーティリティ クラスに組み込まれている場合
• 次の場合に摩擦が追加されます: ぼかしまたは不透明度の値が Tailwind のデフォルトのスケールにきれいにマッピングされず、backdrop-blur-[14px] のような任意の値が強制されます。

同じコンポーネントにプレーン CSS クラスと Tailwind クラスを混在させると、すぐに混乱してしまう傾向があります。コンポーネントごとに 1 つのエクスポート形式を選択し、そのまま使用します。

Glassmorphism エフェクトを段階的に構築するにはどうすればよいですか?

エフェクトの構築は毎回同じ順序に従います: まず背景、次に 4 つのガラス プロパティ、 次にブラウザーのフォールバックです。

これは、CSS 構文を最初から教えるのではなく、CSS 構文の基本的な知識があることを前提としています。

• ステップ 1: 親要素またはページ自体にグラデーションまたは画像の背景を配置します。
• ステップ 2: 相対位置または絶対位置を使用して、背景の上にガラス容器を配置します。
• ステップ 3: ぼかし値を指定して backdrop-filter を追加し、古い Safari の -webkit-backdrop-filter と組み合わせます。
• ステップ 4: 光が通過するように背景色を半透明の rgba または hsla 値に設定します。
• ステップ 5: 明るい半透明の境界線とソフト ボックス シャドウを追加します。
• ステップ 6: 背景フィルタのないブラウザの場合、不透明なフォールバック背景を @supports ブロックで囲みます。

ステップ 3 ～ 6 は、ジェネレーターのデフォルト値では次のようになります。

.glass-panel {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass-panel {
    background: rgba(255, 255, 255, 0.85);
  }
}

これら 6 つのステップの後に重要な追加ステップが 1 つあります。メディア クエリ (EN)を使用して、いくつかのブレークポイントでパネルをテストします。デスクトップでは適切に見えるぼかし半径が、小さな画面では重すぎるように見えることがよくあります。

手動でコーディングせずにジェネレーターを使用している場合、このシーケンスは何も変わりません。上記のツールはステップ 3 ～ 5 を実行し、完成したブロックを返します。ステップ 1、2、6 は覚えておきます。

ぼかし、透明度、境界線、影の値をカスタマイズするにはどうすればよいですか?

ガラス パネルが洗練されて見えるか乱雑に見えるかは、ぼかし半径、背景アルファ、境界線の不透明度、 コーナー半径の 4 つの値によって決まります。

デフォルトはツールによって異なります。 CSSPortal (EN) のジェネレーターは、不透明度約 20% の Blur(10px) に近い値で開始されます。これは、混雑した写真の背景では微妙に見えます。これは、不透明度 30% のぼかし (10px) から始まり、飽和 (180%) します。

彩度と明るさ: 背景フィルターはぼかし関数以上のものを受け入れます。 saturate() または brightness() は、ガラスからにじみ出る色を際立たせるために一緒に使用されることがよくあります。

専用のカラー フィルタ ジェネレータ (EN)を使用すると、ブラインドで数値を入力するよりも早く彩度と明るさの値をダイヤルインできます。

カラー関数の選択: rgba() は、ほとんどのジェネレーターのデフォルトです。赤、緑、青のチャネルではなく、色相と明度ですでに考えていると、hsla() はより直感的に読み取れます。

最初に HSL から RGB コンバータを介して 16 進数のブランド カラーを色相ベースの値に変換すると、切り替えが簡単になります。

デフォルトでは、これらの値は何もぼかしません。 フィルター エフェクト モジュール仕様 (EN)は、backdrop-filter の初期値を none に設定するため、フィルター関数が明示的に書き込まれるまでパネルは鮮明なままになります。

グラスモーフィズム効果を壊すよくある間違いとは何ですか?

ガラスモーフィズムの失敗のほとんどは 4 つの再現性のある間違いによって引き起こされますが、そのどれも悪趣味によるものではありません。

Google 自身の backdrop-filter に関する web.dev の記事 (EN)では、まさに 3 番目の修正、JavaScript ポリフィルではなくプレーン イメージにフォールバックすることを推奨しています。ポリフィルは、純粋に装飾的な効果であるため、実際の実行時コストが追加されます。

そのフォールバックをスキップすると、古いブラウザーでの見た目が悪くなるだけではありません。これは、2022 年より前の Firefox ビルドまたは古い WebView をまだ実行しているユーザーの ウェブ アクセシビリティ (EN)を静かに破壊します。

2025 年以降、この発電機の出力と Apple の液体ガラスを混同するという新たな間違いが明らかになりました。 Apple は、2025 年 6 月 9 日の WWDC でその屈折とモーションベースのマテリアルを導入 (EN)し、iOS 26 と macOS Tahoe 26 に配布しました。

4 つの静的 CSS プロパティでは、リアルタイムの屈折やタッチ応答を再現できません。これは、背景フィルターだけではなくネイティブ レンダリングに依存するため、成果物が CSS グラスモーフィズム パネルである場合は、クライアントに「液体ガラス」を約束しないでください。

縮小されたジェネレーターの出力で間違いを見つけるのが難しい場合は、最初に CSS beautifier (EN) を通じてコードを実行すると、4 つのプロパティを 1 行ずつスキャンしやすくなります。

よくある質問：CSSすりガラス効果ジェネレーター

グラスモーフィズムのデザイントレンドはどこから来たのでしょうか?

この用語は、散在する曇りガラスのインターフェイスを 1 つの共有名でグループ化した、Hype4.Academy の Michal Malewicz の2020 年 11 月の記事に遡ります。ビジュアル スタイルはラベルよりも古いものです。背景フィルターが CSS として存在する前に、半透明のオペレーティング システム パネルに表示されていました。

グラスモーフィズムはニューモーフィズムと同じですか?

いいえ、それらは逆の視覚的ロジックで実行されます。 Glassmorphism は透明性とぼかしに依存しており、ビジーなグラデーションの背景の上にシースルーのパネルを重ねます。ニューモーフィズムは、固体表面上に柔らかい、一致する色の影を使用して、要素が押し出されたり、押し込まれたりしているように見せます。

グラスモーフィズム効果を構築するには JavaScript が必要ですか?

いいえ。この効果は、backdrop-filter、background-color、border、box-shadow という 4 つの CSS プロパティで完全に実行され、スクリプトは含まれません。 JavaScript は、テーマの切り替え、スクロール時のブラーのアニメーション化、またはジェネレーター独自のスライダー インターフェイスの実行のためにのみ画像に入ります。

CSS グラスモーフィズム ジェネレーターの費用はいくらですか?

このジェネレーター、glassmorphism.com、css.glass を含め、ここで取り上げたすべてのジェネレーターは使用に一切費用がかかりません。有料の代替ツールは、スタンドアロンのガラス効果ツールとしてではなく、大規模な UI キット サブスクリプションまたは Figma プラグイン マーケットプレイス内のバンドル機能として表示されることがほとんどです。

React または Figma でグラスモーフィズム ジェネレーターを使用できますか?

はい、さまざまな方法で。ジェネレーターの CSS 出力は、変換を必要とせずに React コンポーネントの className ブロックまたは styled-components ブロックに取り込まれます。 Figma には背景フィルター プロパティがないため、デザイナーはFigma でレイヤーをぼかす (EN)方法を学び、塗りつぶしを積み重ねることによって背景フィルター プロパティを再作成します。

背景フィルターのレンダリングの問題のデバッグに役立つツールは何ですか?

ブラウザ DevTools のレンダリング パネルには、 レイヤーが実際にGPU 上で合成されているか、ソフトウェア ペイントにフォールバックしているかが表示されます。 [スタイル] パネルで背景フィルター宣言のオフとオンを切り替えると、パネルが予期せずフラットに見える場合にプロパティが分離されます。

CSS Glassmorphism Generatorを使用した後、最初に何を修正する必要がありますか?

CSS グラスモーフィズム ジェネレーターのエクスポートされたコードは、ぼかし半径や角の丸みを付ける前にコントラスト チェックを行う必要があります。半透明パネル上の読めないテキストは実際のユーザーにとってページを壊すものですが、数ピクセル離れたぼかし値はわずかに洗練されていないようにしか見えません。

すべてを一度に修正するよりも、順序を修正することが重要です。

• 文字とガラスパネルのコントラスト
• ベンダープレフィックスとブラウザフォールバック
• ぼかし半径とコーナーの微調整

Chrome プラットフォーム ステータス (EN)によると、Firefox がプレフィックスなしのサポートを追加したのは 2022 年でしたが、Backdrop フィルタは、2026 年 9 月の時点で Chrome ページ読み込みの 35.7% にすでに使用されています。その導入のほとんどは過去 4 年間に行われました。

これら 3 つのチェックに合格したら、次に自然に停止するのは、半透明のガラス パネルに代わる、より重く、より触感の高いインターフェイスを必要とするインターフェイスの CSS ニューモーフィズム (EN)を検討することです。