CSS グラスモーフィズム ジェネレーター
ガイド
CSS グラスモーフィズム ジェネレーター
ライブビジュアルエディタで、見事なすりガラス効果を作成します。バックドロップブラー、背景の透明度、境界線の不透明度、境界線の半径、ボックスシャドウをリアルタイムで調整し、カラフルなプレビューで結果を即座に確認できます。生成されたCSSまたはプロジェクトで利用できる完全なHTML+CSSスニペットを、クロスブラウザサポートのためのベンダープレフィックスとともにコピーします。
使用方法
スライダーを使用してガラスモーフィズムのプロパティを調整します。バックドロップブラーはすりガラスの強度を制御し、背景色とアルファはティントを設定し、境界線は繊細なガラスのエッジを追加します。6つのグラデーション背景から選択し、フローティングシェイプを切り替えて、ぼかしがガラスカードの後ろにあるコンテンツとどのように相互作用するかを確認します。Subtle GlassやDark Glassのようなプリセットを選択して、すばやく開始し、微調整します。結果に満足したら、CSSまたは完全なHTML+CSSスニペットをコピーします。
機能
- ライブプレビュー – 調整中にガラスモーフィズム効果がリアルタイムで更新されるのを確認
- バックドロップブラーコントロール – すりガラスの強度を設定するための0〜40pxのスライダー
- RGBA背景 – 精密な透明度制御のための個別の不透明度スライダーを備えたカラーピッカー
- 境界線とシャドウコントロール – 境界線の幅、色、不透明度、半径、およびオプションのボックスシャドウを調整
- グラデーション背景 – ぼかし効果を示すためのオプションのフローティングシェイプを備えた6つのカラフルなグラデーションプリセット
- スタイルプリセット – ワンクリックプリセット：Subtle Glass、Frosted、Dark Glass、Colorful Glass
- ベンダープレフィックス – 生成されたCSSには、Safari互換性のための-webkit-backdrop-filterが含まれています
- CSSまたはHTML+CSSをコピー – CSSプロパティのみ、またはすぐに貼り付けられる完全なカードスニペットを取得
よくある質問
-
CSSのガラスモーフィズムとは？
ガラスモーフィズムは、CSSの`backdrop-filter`を使用して、ぼかしと半透明の背景色を組み合わせて、すりガラスのような外観を作成するUIデザインのトレンドです。ぼかしは、要素の後ろにあるコンテンツを柔らかく拡散させて見せ、半透明の背景は色合いを加えます。AppleのmacOS Big SurやWindows 11のFluent Designで普及したガラスモーフィズムは、背景要素を部分的に透かして見せることで、奥行きと視覚的な階層を作成します。主要なCSSプロパティは、`backdrop-filter: blur()`、`background: rgba()`、そして通常はガラスのエッジを強調するための繊細な境界線です。
-
どのブラウザが`backdrop-filter`をサポートしていますか？
`backdrop-filter`は、Chrome 76以降、Safari 9以降（`-webkit`プレフィックス付き）、Edge 79以降、Firefox 103以降、およびすべての最新のモバイルブラウザでサポートされています。Safariは`-webkit-backdrop-filter`プレフィックスを必要としますが、これはこのジェネレータに自動的に含まれます。唯一の注目すべきギャップは、103より前の古いFirefoxバージョンと、サポートのないInternet Explorerです。サポートされていないブラウザの場合、半透明の背景色はぼかしなしでも色合いのオーバーレイ効果を提供します。2026年現在、全体的なブラウザサポートはグローバルユーザーの95％以上です。
-
CSSの`backdrop-filter`は、通常の`filter`とどう違いますか？
CSSの`filter`プロパティは、要素自体とその子孫にぼかしなどの視覚効果を適用します。`backdrop-filter`は、要素の後ろの領域にのみ同じ効果を適用し、要素のコンテンツはシャープで読みやすいままにします。これがガラスモーフィズム効果を作成する理由です。ガラスカード上のテキストは鮮明なままで、その背後の背景はぼやけて見えます。代わりに`filter: blur()`を使用した場合、カード内のテキストもぼやけて読みにくくなります。`backdrop-filter`は本質的に、すりガラスを通して見ているようなウィンドウ効果を作成します。
-
優れたガラスモーフィズムデザインとは？
効果的なガラスモーフィズムには、ぼかしを可視化するためにカラフルまたは詳細な背景が必要です。ガラスの後ろにある単色の白い背景は、通常のカードと区別がつきません。ほとんどの場合、8〜20ピクセルのぼかし値を使用してください。背景の不透明度は10〜30％に保ち、後ろのコンテンツが部分的に見えるようにしてください。ガラスのエッジを強調するために、10〜30％の白い不透明度で繊細な明るい境界線を追加します。各`backdrop-filter`はパフォーマンスコストを増大させるため、複数のガラスレイヤーを積み重ねないでください。半透明の背景は読みやすさを低下させる可能性があるため、テキストのコントラストがアクセシビリティ基準を満たしていることを確認してください。
恵 スコアボードが到着しました！
スコアボード ゲームを追跡する楽しい方法です。すべてのデータはブラウザに保存されます。さらに多くの機能がまもなく登場します！
必見ツール
すべて表示参加する
価値ある無料ツールの提供を継続するためにご協力ください
