グラスモーフィズムジェネレーター

グラスモーフィズムは、半透明の背景、バックドロップブラーフィルター、繊細なボーダー、時にはソフトシャドウを組み合わせて、すりガラスのような外観を作り出すモダンなUIデザインのトレンドです。ランディングページ、ダッシュボード、カードで人気の、レイヤー感と奥行きのあるルックを要素に与えます。

CSS の backdrop-filter プロパティは、要素の背後の領域にぼかしなどのグラフィカルエフェクトを適用します。半透明の背景と組み合わせると、すりガラスのような見た目が生まれます。完全な Safari サポートには -webkit-backdrop-filter プレフィックスが必要です。

backdrop-filter はすべてのモダンブラウザーでサポートされています：Chrome、Edge、Firefox（v103+）、Safari、Opera。-webkit- プレフィックスは古い Safari バージョンをカバーします。Internet Explorer はこのプロパティをサポートしていません。生成された CSS には最大互換性のため、標準版とプレフィックス版の両方が含まれています。

8px から 20px の間のぼかし値が通常、最も良いすりガラスの見た目を生み出します。4px 未満の値は鮮明すぎて見え、30px を超える値は過度にぼけて見えることがあります。理想的な値は背景の複雑さによって異なります。高度に詳細な背景はより高いぼかし値が効果的です。

グラスモーフィズムが見えるためには、カラフルまたは複雑な背景が必要です。カードの後ろの背景が無地の白や単一の単色の場合、ぼかしと透明度が混合できる可視コンテンツがありません。プレビューにカラフルな背景を追加するには、背景グラデーションまたは画像オプションを使用してください。

CSS コピーボタンを使って CSS コードをコピーし、スタイルシートに貼り付けます。.glass-card クラスを HTML 要素に適用します。エフェクトが正しく表示されるよう、親コンテナのガラスカードの後ろにカラフルな背景または配置された背景画像があることを確認してください。

ガラスの不透明度はカード背景自体の透明度を制御します。低い値ではより多くの背景が透けて見えます。ボーダーの不透明度は独立して、カードのボーダーハイライトの視認性を制御します。これは通常、ガラスの端にリアルな光沢を与える半透明の白い線です。

はい！ガラス設定で背景グラデーションのトグルを有効にしてください。2色と角度を選択して、ガラスカードの線形グラデーション背景を作成できます。不透明度スライダーは両方のグラデーションストップに適用され、すりガラスの透明度を維持します。

ツールには6つのプリセットが含まれています：ライトガラス（クラシックな白いすりガラス）、ダークガラス（暗い半透明パネル）、フロステッド（強いぼかし、高い不透明度）、カラフル（紫ピンクのグラデーションガラス）、ミニマル（ほぼ見えないガラス層）、ビビッド（鮮やかな背景の上のシアン・ティールガラス）。

背景シーンのトグルを画像URLに切り替えて、画像への直接リンクを貼り付けます。プレビューでは、ガラスカードの後ろの背景としてあなたの画像が表示されます。一般公開されている画像URLが最もよく機能します。

backdrop-filter は、特に高いぼかし値や同じページに多くのガラス要素がある場合、GPU に負荷をかけることがあります。パフォーマンスのために、ぼかし値を適切に保ち（20px 未満）、多くのガラスレイヤーを重ねることを避け、低電力デバイスでテストしてください。

もちろんです。グラスモーフィズムはボタン、ナビゲーションバー、サイドバー、モーダル、ツールチップ、あらゆるフローティング UI 要素にうまく機能します。要素タイプに適したボーダー半径を保ち、可読性のためにテキストとガラス背景の間の十分な色のコントラストを確保してください。