CSS3 シャドウ

Volardev 編集部 April 13, 2026

CSS3 を使用すると、テキストや要素にシャドウ（影）を追加できます。本セクションでは、以下のプロパティについて解説します。

1. CSS3 テキストシャドウ (text-shadow)

text-shadow プロパティは、テキストにシャドウを適用するために使用されます。

最も単純な使い方は、水平方向のシャドウ（2px）と垂直方向のシャドウ（2px）を指定することです。

h1 {
  /* 水平 2px, 垂直 2px */
  text-shadow: 2px 2px;
}

次に、シャドウにカラーを追加します。

h1 {
  /* 水平 2px, 垂直 2px, カラーは赤 */
  text-shadow: 2px 2px red;
}

シャドウに「ぼかし」を追加するには、3 つ目のパラメータ（ぼかし半径）を指定します。

h1 {
  /* 水平 2px, 垂直 2px, ぼかし 5px, カラーは赤 */
  text-shadow: 2px 2px 5px red;
}

可読性を高めるために、白いテキストに黒いシャドウを適用する例です。

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

ぼかしを強く設定することで、ネオンのような光り輝くエフェクトを作成できます。

h1 {
  text-shadow: 0 0 3px #FF0000;
}

1 つのテキストに複数のシャドウを適用するには、カンマ（,）で区切って指定します。

以下の例では、赤と青の 2 色のネオン風シャドウを重ねています。

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

また、テキストの周囲に境界線を描くような効果も作成可能です。

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

box-shadow プロパティは、要素全体にシャドウを適用するために使用されます。

水平方向と垂直方向のオフセットを指定します。

div {
  /* 水平 10px, 垂直 10px */
  box-shadow: 10px 10px;
}

シャドウに特定の色を付与します。

div {
  box-shadow: 10px 10px lightgrey;
}

3 つ目のパラメータでぼかし具合を調整します。

div {
  box-shadow: 10px 10px 5px lightgrey;
}

box-shadow プロパティを利用して、紙のような質感の「カード型 UI」を作成できます。これはモダンなウェブデザインにおいて非常に一般的です。

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

シャドウを適切に使い分けることで、ユーザーインターフェースに階層構造（Elevation）を持たせることが可能になります。特に rgba を使用して不透明度を調整した柔らかな影は、洗練されたデザインを実現する上での必須テクニックです。