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)。水平・垂直オフセットは影の方向、ぼかし半径は影のなめらかさ（0だとシャープなエッジ）、スプレッドは影のサイズ拡大（負の値で縮小）を制御します。insetキーワードを先頭に追加すると内側に影が入ります。オフセット0・ぼかし大きめ・スプレッド小さめにすると全方向に均等に広がる柔らかい影になり、カードUIのエレベーション表現に使われます。色はrgba()で透明度を指定するのが一般的で、不透明な黒い影より半透明の影の方が自然に見えます。
複数シャドウを重ねた高度なエフェクト
box-shadowはカンマ区切りで複数のシャドウを重ねられます。「近くに濃い影 + 遠くに薄い影」を重ねると自然なマテリアルデザイン風の立体感が出ます。グロウエフェクトは色付きのシャドウ（オフセット0・ぼかし大・スプレッド小〜中）で実現できます。Box Shadow Generatorでは最大5レイヤーを個別に編集して重ねられます。Tailwind CSSのshadow-xl（box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)）は2つの影を重ねてより自然な深みを出す設計になっています。複数シャドウをうまく使うとFigmaのドロップシャドウより繊細で洗練された影表現が可能です。
ニューモーフィズムデザインへの応用
ニューモーフィズム（Neumorphism）は明るい影と暗い影を同時に当てることで押し出されたような立体感を表現するデザイン手法です。背景と同系色の薄い色のbox-shadowを左上（明るい色：背景を明るくしたもの）と右下（暗い色：背景を暗くしたもの）に設定することで実現できます。例: box-shadow: -4px -4px 8px rgba(255,255,255,0.5), 4px 4px 8px rgba(0,0,0,0.2)。凹んだ（押し込まれた）表現にはinsetシャドウを使います。ニューモーフィズムはコントラスト比が低くなりがちでアクセシビリティ的な課題があるため、インタラクティブな要素には慎重に使う必要があります。Box Shadow Generatorでニューモーフィズムプリセットを選ぶと手軽に試せます。
パフォーマンスへの影響
box-shadowはブラウザの再描画（repaint）コストが高く、多数の要素にアニメーションで動かすと重くなる場合があります。アニメーションする場合はfilter: drop-shadow()のほうがGPUコンポジタで処理されて滑らかなことがあります。また、shadow自体を変化させる代わりにopacityで見せ/隠しするテクニック（hover前から影を配置しopacity: 0→1でフェードイン）が一般的なパフォーマンス最適化です。ホバーエフェクトでbox-shadowを変化させる場合はwill-change: box-shadowを事前に設定することでブラウザが準備できます。スタティックな影はどんなに複雑でもパフォーマンスに影響しないため、デザインを優先して設計して問題ありません。