グラスモーフィズム生成
ぼかし、彩度、色、透明度、枠線、角丸、影を調整し、すりガラスのパネルを作成します。CSSやTailwindクラスをコピーし、プレビューのPNGを保存できます。出力には接頭辞あり・なしの`backdrop-filter`を含め、透明度を下げる設定向けの不透明な表示も追加できます。
プリセット
プリセットを選ぶとすべての設定が一度に反映されます。そこから微調整できます。
CSS
.glass {
border-radius: 24px;
border: 1px solid rgb(255 255 255 / 0.25);
background-color: rgb(255 255 255 / 0.12);
background-clip: padding-box;
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 8px 32px rgb(0 0 0 / 0.28);
}
@media (prefers-reduced-transparency: reduce) {
.glass {
background-color: #ffffff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}backdrop-filter は要素の背後に描かれたもの（ページ、画像、別のコンポーネント）をぼかします。プレビューでガラスの背後に単色またはグラデーションの層を置くと、実際の見え方を確認できます。
Tailwindクラス
rounded-[24px] border-[1px] border-[color:rgb(255_255_255_/_0.25)] bg-[rgb(255_255_255_/_0.12)] backdrop-blur-[20px] backdrop-saturate-[1.80] shadow-[0_8px_32px_rgb(0_0_0_/_0.28)] bg-clip-padding [@media(prefers-reduced-transparency:reduce)]:bg-[rgb(255_255_255_/_1)] [@media(prefers-reduced-transparency:reduce)]:[backdrop-filter:none] [@media(prefers-reduced-transparency:reduce)]:[-webkit-backdrop-filter:none]古いブラウザーにも対応するため、接頭辞付きと接頭辞なしのbackdrop-filterを出力します。
グラスモーフィズム生成はどう動きますか？
`backdrop-filter`はパネルの背後にある内容をぼかし、彩度を調整します。半透明の背景色が色味を加え、枠線が輪郭を示します。単色の面よりも、模様や色の変化がある背景で効果が見えやすくなります。
プレビューは独自の背景を持つSVGです。`feGaussianBlur`の標準偏差にぼかしの設定値を使い、色行列で彩度を調整します。PNGも同じSVGから生成します。ページに貼るCSSは、その要素の背後にある実際の内容に作用します。
透明度を下げる設定への対応を有効にすると、CSSとTailwindに`@media (prefers-reduced-transparency: reduce)`を追加します。ブラウザがこの設定を通知した場合、選択した色を不透明にし、フィルターを外します。対応状況はブラウザとOSによって異なります。
半透明の状態と不透明な状態の両方でコントラストを確認してください。大きなパネルや動く背景は描画の負荷を増やすことがあります。ぼかしを調整し、実際に使う端末で確認します。
パネルの設定
ぼかし 20px 彩度 180% 色味の色 #ffffff 色味の不透明度 0.12 角丸 24px
生成したCSS
.glass {
border-radius: 24px;
border: 1px solid rgb(255 255 255 / 0.25);
background-color: rgb(255 255 255 / 0.12);
background-clip: padding-box;
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
}グラスモーフィズム生成が対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| blur(Xpx) | 長さ | 20px | パネルの背後のぼかしを指定します。SVGプレビューは同じ値をフィルターの標準偏差に使います。 |
| saturate(X%) | 割合 | 180% | 背後の彩度を調整します。100%は元の彩度を保ち、それ以上は色を強めます。 |
| background-color | アルファ付きrgb | 白・12% | パネルの色と透明度を指定します。不透明度を上げるほど背景を覆います。 |
| border | 太さと色 | 1px・白・25% | ガラスを縁取る枠線の太さ、色、不透明度を調整します。 |
| background-clip | padding-box | 有効 | 背景色の描画を枠線の内側に制限し、半透明の背景と枠線の重なりを防ぎます。 |
| -webkit-接頭辞 | 追加の宣言 | 有効 | 古いブラウザへの対応として、`backdrop-filter`と`-webkit-backdrop-filter`の両方を出力します。 |
| prefers-reduced-transparency | メディアクエリ | 有効 | ブラウザが設定を通知した場合、選択色を不透明にしてフィルターを外します。対応状況は環境によって異なります。 |
よくある質問
CSSですりガラス効果を作るには？
半透明の背景、`backdrop-filter: blur(20px) saturate(180%)`、明るい枠線を組み合わせます。生成するコードには互換性のための`-webkit-backdrop-filter`と、背景を枠線の内側に収める`background-clip: padding-box`も含まれます。
`backdrop-filter`が何も効かないのはなぜ？
背後に見える内容があり、パネルの背景が十分に透明かを確認してください。次にブラウザの対応状況、両方の`backdrop-filter`宣言、効果の範囲を制限する祖先要素を確認します。フィルターは要素自身ではなく、その背後をぼかします。
グラスモーフィズムはパフォーマンスに悪い？
負荷はパネルの大きさ、ぼかし、背景の動き、端末によって異なります。大きな領域や固定パネルでは効果を控えめにし、スマートフォンでも確認してください。描画が重い場合は不透明な表示も検討できます。
`prefers-reduced-transparency`ブロックがあるのはなぜ？
ブラウザが通知する透明度を下げる設定に対応するためです。有効にすると、選択した色を不透明にしてフィルターを外すルールを出力します。対応状況はブラウザとOSによって異なります。どちらの表示でもコントラストを確認してください。
すりガラスのプレビューはコピーするCSSと同じ？
プレビューとPNGはデモ用の背景を持つSVGです。CSSは同じ設定値を使いますが、実際のページでパネルの背後にある内容をぼかします。そのため、背景によって見え方が変わります。
ガラスパネルが白っぽく、または灰色に見えるのはなぜ？
無彩色、高い不透明度、模様のない背景では効果が弱く見えることがあります。色、透明度、彩度を調整してください。出力には、背景の描画を枠線と分ける`background-clip: padding-box`が含まれます。