CSS box-shadow ジェネレーター（ライブプレビュー付き）

影の5つのパラメータ

X オフセット: 水平方向の変位。正の値で右に、負で左に影を移動。左上から光が当たる前提（一般的なUI想定）なら、小さな正の X で左上から光を表現。

Y オフセット: 垂直方向の変位。正で下に影を移動し、上方光源を表現。ほぼすべてのUI影は正の Y を使用。

ぼかし半径: 影のエッジの柔らかさ。0 = 鋭いエッジ（稀）。8-30px がカードやボタンで一般的。値が大きいほど夢のような柔らかい影に。

広がり: 影を均等に拡大・縮小。正で要素より大きく、負で小さく。負の広がりとオフセットの組み合わせは「浮上」効果を生成。

色・不透明度: 影は通常、低不透明度（10-30%）の黒。色付きの影はトレンドだが使いこなしが難しい。背景の明度範囲に合わせる — 暗いUIに濃い影は消え、明るいUIに薄い影はコントラスト不足。

インセット影

インセット影は要素の外側ではなく内側に描画。用途: 押下されたボタン状態、沈んだ入力欄、ニューモフィック「3D押し込み」効果。

インセット影は要素の border-radius を尊重し、overflow を無視。実際のレイアウトを変えずにフラットUI要素に視覚的な深みを加えるのに有用。

ニューモフィズムと「ソフトUI」トレンド

ニューモフィズム（2020-2022年に流行）は、2つの対向する影 — 1つは明るく、1つは暗く — を使って同色の背景から要素が浮き出ているように見せる。「ニューモフィック」プリセットは暗い影単体のみ表示。完全なニューモフィックには反対側の明るいインセット影と組み合わせる: 'inset -8px -8px 20px rgba(255,255,255,0.5), 8px 8px 20px rgba(0,0,0,0.12)'。

注意: 純粋なニューモフィズムにはアクセシビリティ問題 — コントラスト不足で要素が区別しにくい。現代のデザインでは控えめに使い、伝統的な影と組み合わせることが多い。