CSSグラスモーフィズム・ニューモーフィズムジェネレーター
すりガラスのような半透明カード（グラスモーフィズム）と、背景から浮き出る・へこむ質感のUI（ニューモーフィズム）のCSSを、スライダーで調整しながら生成できます。グラスはbackdrop-filterによるぼかしと彩度、ニューモーフィズムは明暗2つのbox-shadowで表現します。背景はCSSグラデーションを切り替えて見え方を確認できます。単純な影を細かく作りたいときは CSS box-shadowジェネレーター が便利です。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
プレビュー
使い方
- 「グラスモーフィズム」または「ニューモーフィズム」のモードを選びます。
- 質感プリセットやスライダーで、ぼかし・透明度・影の強さなどを調整します。
- グラスは背景グラデーションを切り替えて見え方を確認します。
- 生成されたCSSをコピーして、自分のスタイルシートに貼り付けます。
注意事項
- `backdrop-filter`は、要素の背後に何かが描画されていないと効果が見えません。背景が単色の場合はぼかしの違いがほとんど分かりません。
- 生成CSSには古いSafari向けの`-webkit-backdrop-filter`も含めています。非対応ブラウザでは半透明の背景だけが適用されます。
- ニューモーフィズムは、親要素の背景色と要素の基準色を同じにしないと影が不自然になります。白に近い色や黒に近い色では明暗の差が出にくくなります。
- ニューモーフィズムはコントラストが低くなりやすいため、文字やボタンの視認性（アクセシビリティ）に注意してください。
- プレビュー背景は外部画像を使わず、CSSグラデーションのみを使用しています。
用語解説
グラスモーフィズム
半透明の背景と背景のぼかしで、すりガラスのように見せるUIデザインの手法。`backdrop-filter`と薄い白い枠線で表現する。
ニューモーフィズム
背景と同じ色の要素に、明るい影と暗い影を組み合わせて、浮き出ているように、またはへこんでいるように見せる手法。
backdrop-filter
要素の背後にある内容に対してぼかしや彩度変更などのフィルターを適用するCSSプロパティ。要素自身には影響しない。
inset（内側影）
`box-shadow`に`inset`を付けると影が内側に描かれ、へこんだ見た目になる。ニューモーフィズムの「凹み」で使う。
よくある質問
グラスモーフィズムでぼかしが効いて見えないのはなぜですか？
`backdrop-filter`は要素の背後にある内容をぼかします。背後が単色だとぼかしても見た目が変わりません。画像やグラデーション、他の要素の上に重ねると効果が分かります。
backdrop-filterはどのブラウザで使えますか？
主要な最新ブラウザで利用できます。古いSafariでは`-webkit-`接頭辞が必要なため、生成CSSには両方を含めています。非対応の環境では半透明の背景のみが適用されます。
ニューモーフィズムの影が不自然に見えます。
要素と親要素の背景色を同じ基準色にそろえてください。白や黒に近い色は明暗の差が出にくいので、少し中間的な色にすると立体感が出ます。
ニューモーフィズムの注意点は何ですか？
要素と背景のコントラストが低いため、ボタンや入力欄の境界が分かりにくくなりがちです。文字色や枠線を別途補い、視認性を確認してください。
このページをシェア