CSS box-shadowの使い方とデザインテクニック
CSS box-shadowはHTML要素に影を付けるプロパティです。シンプルなドロップシャドウからニューモーフィズム・グロウエフェクトまで、UIデザインで幅広く使われています。
box-shadowの5つのパラメータ
box-shadowは「水平オフセット 垂直オフセット ぼかし スプレッド 色」の順で指定します。例: box-shadow: 4px 8px 16px 0px rgba(0,0,0,0.2)。insetキーワードを追加すると内側に影が入ります。オフセット0・ぼかし大きめにすると全方向に均等に広がる柔らかい影になります。
複数シャドウを重ねた高度なエフェクト
box-shadowはカンマ区切りで複数のシャドウを重ねられます。「近くに薄い影 + 遠くに薄い影」を重ねると自然な立体感が出ます。グロウエフェクトは色付きのシャドウ（ぼかし大・スプレッド中）で実現できます。Box Shadow Generatorでは最大5レイヤーを個別に編集して重ねられます。
ニューモーフィズムデザインへの応用
ニューモーフィズム（Neumorphism）は明るい影と暗い影を同時に当てることで押し出されたような立体感を表現するデザイン手法です。背景と同系色の薄い色のbox-shadowを左上（明るい色）と右下（暗い色）に設定することで実現できます。
パフォーマンスへの影響
box-shadowはブラウザの再描画コストが高く、多数の要素にアニメーションで動かすと重くなる場合があります。アニメーションする場合はfilter: drop-shadow()やopacityアニメーションの方がGPU最適化されて滑らかなことがあります。スタティックな影はbox-shadowで問題ありません。