box-shadowとは

box-shadow は、要素に影を付けるCSSプロパティです。ボタンやカードに影を付けることで、画面に「奥行き」や「浮いている感じ」を表現でき、クリックできそうな印象や情報の階層を伝えられます。

値の構成

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);

左から順に、次の意味を持ちます。

不自然に見える影の多くは「濃すぎ」「真っ黒」が原因です。次のポイントを押さえると上品になります。

, で区切ると複数の影を重ねられます。近い影と遠い影を組み合わせると、より自然な立体感になります。

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.12);

先頭に inset を付けると、外側ではなく内側に影が落ちます。へこんだ入力欄や押し込まれたボタンの表現に使えます。

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);

数値を手で調整しながら結果を確認するのが一番の近道です。CSSボックスシャドウ生成ツールでは、スライダーで各値を動かしてリアルタイムにプレビューし、できたCSSをそのままコピーできます。影の重ねがけにも対応しています。

背景のグラデーションはCSSグラデーション生成、色選びはカラーピッカーと組み合わせると、UIの仕上げが一気に進みます。