CSSシャドウ完全ガイド｜box-shadowとtext-shadowの使い方

box-shadowの構文

box-shadow: h-offset v-offset blur spread color;

/* 例 */
box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.2);

• h-offset：水平方向のずれ（正=右、負=左）
• v-offset：垂直方向のずれ（正=下、負=上）
• blur：ぼかし半径（大きいほどぼんやり）
• spread：影の広がり（省略可）
• color：影の色

inset（内側シャドウ）

/* 押し込まれたような見た目 */
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3);

複数のシャドウを重ねる

/* カンマで複数指定 */
box-shadow:
  0 1px 3px rgba(0,0,0,0.12),
  0 4px 6px rgba(0,0,0,0.08),
  0 24px 64px rgba(0,0,0,0.04);

text-shadow

/* テキストにシャドウ */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

/* 発光エフェクト */
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0ff;

ニューモーフィズムへの応用

ニューモーフィズム（Neumorphism）は、同系色の明暗2色のシャドウを組み合わせて、UIが表面から浮き出ているような立体感を表現するデザインスタイルです。

.neumorphism {
  background: #e0e5ec;
  box-shadow:
    6px 6px 12px #b8bec7,
    -6px -6px 12px #ffffff;
}