グラスモーフィズム生成

機能

• ガラスの色と不透明度を別々に調整 —— 半透明がこの効果の土台です
• 背景のぼかし 0〜60px、プレビュー付き
• 彩度 100〜300%。ガラスの後ろの色がより鮮やかになります
• オン/オフできる明るい枠線。色と不透明度も調整できます
• 角丸の調整
• `backdrop-filter` と `-webkit-backdrop-filter` の両方を出力。iOS でも実際にぼけます
• プレビュー裏はカラフルな背景。ぼかしと彩度が見て分かります
• 下に完全な CSS ルール（`.glass` セレクター付き）を出力
• 値は丸め処理済み、色も検証済みで、無効な CSS を出しません
• 計算はすべてブラウザー内で完結し、何も送信されません

使い方

1. まず不透明度から。低すぎるとガラスが見えず、高すぎるとただの塗りつぶしになります
2. 次に背景のぼかしを調整し、後ろの色がどれだけ混ざるかを見ます
3. より「透き通った」感じにしたいときは彩度を上げます
4. 良ければコピー ボタンでルール全体を取り出します

よくある質問

iPhone でグラス効果が出ないのはなぜですか？

ほとんどの場合 `-webkit-backdrop-filter` の欠落です。Safari が標準プロパティを既定で解釈するのは 18 からで、モバイルでのシェアは小さくありません —— そのため本ツールは両方の行を出力します。もう一つ見落とされがちな前提があります：要素の背後に実際に何かがあること（画像、色ブロック、別の要素）。背後が真っ白なページなら、白をぼかしても白で、何も起きていないように見えます。

`backdrop-filter` と `filter` の違いは？

一言で言えば、`filter` は自分を、`backdrop-filter` は背後をぼかします。 要素に `filter: blur(12px)` を書くと、その要素と中の文字が一緒にぼけます。`backdrop-filter: blur(12px)` なら要素自身はくっきりしたまま、背後から透けてくる内容だけがぼけます —— すりガラスはこちらです。併用もできますが（背後をぼかして要素を少し調整するなど）、`filter` をすりガラスの書き方と思わないでください。

不透明度はどのくらいが適切ですか？

通常は 10% から 30% の間です。10% を下回るとガラスはほとんど消え、枠線と角丸の輪郭が拠り所を失います。30% を超えると普通の不透明ブロックに近づき、背後の内容が見えなくなって「ガラス」の感覚も失われます。適切な値は背後のコントラストにも依存します —— 背後が派手なほど不透明度を下げ（内容をより透かし）、輪郭は枠線で保つ、という調整になります。

この効果に性能コストはありますか？

あります。見た目より大きいです。 `backdrop-filter` は要素の背後の領域を取り出して別途ぼかす処理を要求するため、スクロールやアニメーション中は継続的なコストになります —— ガラス要素が重なると特に顕著で、低スペック端末ではフレーム落ちしやすくなります。実務的な助言：一画面に多く置かない、スクロール中に広い面積で動かさない、ガラス要素自体にアニメーションを付けない。固定位置のオーバーレイ（ナビゲーションバー、カード）に向き、全画面スクロールの背景には向きません。

すりガラス上の文字の読みやすさはどう確保しますか？

このスタイル最大の落とし穴です。 背景がぼけると、文字の下の明暗が不定になります —— 同じナビゲーションバーでも、明るい画像の上では読めて、暗い画像の上では濁ります。実用的な手はいくつかあります。ガラス層自体に全体の色の傾向を少し与える（純白ではなくブランド色をわずかに含んだ白にする）と、文字とのコントラストが安定します。文字に軽い `text-shadow` を足すのも有効です。最も手間ですが確実なのは、最も明るい内容と最も暗い内容の両方をスクロールで通過させ、どちらでも読めることを確認する方法です。