【CSS】box-shadowで影をつける方法とサンプル集

今回はCSSのbox-shadowを使って影（ドロップシャドウ）をつける方法と、コピペで使える影のサンプルを6個紹介します。ぜひ参考にしてみてください。

CSSのbox-shadowの使い方

それでは、まずbox-shadowプロパティの使い方を紹介します。何かの要素に影をつけたいときには、例えば以下のように書きます。

.box {
  /* 左右のずれ 上下のずれ ぼかし 広がり 色 内側指定 */
  box-shadow: 2px 2px 4px -2px gray inset;
}

.boxの部分はセレクタですね。ここで影をつける要素を指定します。

値は半角スペース区切りで指定します。最初の2つは必須で、順に左右のずれと上下のずれを表します。ここではpxを使いますが、remなどの長さの単位も使えます。
後ろのぼかし・広がり・色・内側指定は省略できます。順番に見ていきましょう。

その1：ぼかしのない影を作る

右と下に4pxずつ伸びる影の例

.example {
  box-shadow: 4px 4px;
}

はじめの2つの値だけを指定しています。1つめの値が左右の方向指定です。正の値を指定すると、右方向に伸びます。左側に伸ばしたいときには「-4px」というようにマイナスの値を指定します。
2つめの値は上下の方向指定です。こちらも同様に、上に伸したいときにはマイナスの値を指定すればOKです。

左に4px、上に6px伸びる影の例

.example {
  box-shadow: -4px -6px;
}

このように、上下左右好きな方向に、好きな長さの影を作ることができます。

その2：影の色を変える

色を省略した影にはcurrentColor、つまりその要素のcolorの値が使われます。文字色と別の色にしたいときは、半角スペースを空けて色を指定します。

影の色を#668AD8にする例

.example {
  box-shadow: 6px 6px #668AD8;
}

色コードや色名を指定するだけで、影の色を変えられます。

その3：影をぼかす

影をぼかしたいときには、3つめの長さにぼかしの度合いを指定します。ここではpxを使います。0ならぼかしなし、数値が大きいほどぼけます。ぼかしには負の値を指定できません。

影を4px分だけぼかす例

.example {
  box-shadow: 2px 2px 4px;
}

右下へ2pxずらした影に、4pxのぼかしを加えています。

影の色を変えつつぼかす例

.example {
  box-shadow: 2px 2px 4px gray;
}

色を変えたいときには、3つの値の後に色コードや色名を書けばOKです。影の色をグレイにしたので、少し影が薄くなっていることが分かるかと思います。

上下左右対称に影をぼかす例

.example {
  box-shadow: 0 0 8px gray;
}

左右と上下のずれをどちらも0にしています。位置をずらさずぼかすため、影が上下左右に広がります。この例はグレイの影に8pxのぼかしを指定しています。

その4：影の広がりを調整する

4つめに書いた値は「影の広がり」具合を決めるものになります。「作った影をそのまま縮小したり、拡大したりできる」というイメージですね。マイナスの値を指定すると、影は小さくなります。

影を縮小させる例

.example {
  box-shadow: 10px 10px 15px -10px;
}

右と下に10pxずつ伸ばし、15px分ぼかしている影に対して、-10px分縮小させています。水色のボックスのサイズに対して、影が小さめになっているのが分かるかと思います。

影を拡大し、色も指定する例

.example {
  box-shadow: 5px 5px 5px 10px rgb(0 0 0 / 20%);
}

今度は影を10px広げてみました。4つの長さの後に色を書いています。rgb(0 0 0 / 20%)は、不透明度20％の黒色を表します。

その5：影を内側にかける

ボックスの内側に影をつけたいときはinsetを付けます。この例では末尾に書きますが、長さの並びの前に置くこともできます。

内側にぼかした影をかける例

.example {
  box-shadow: 2px 2px 4px inset;
}

ボックスの内側に影がかかります。ずれは右と下へ2px、ぼかしは4pxです。内側の影では、この正方向のずれにより上辺と左辺側が暗く見えます。

影の向きを変え、色も変える例

.example {
  box-shadow: -5px -5px 10px #668AD8 inset;
}

マイナスの値にすれば影のかかる向きが変わります。

その6：カンマ区切りで内側と外側両方に影をかける

box-shadowはカンマ区切りにより複数の値を指定することができます。これにより、内側と外側どちらにも影をつけることも可能です。

内側と外側に影をかける例

.example {
  box-shadow: 3px 3px 6px -2px #555,
  3px 3px 8px rgb(255 255 255 / 80%) inset;
}

外側にはぼかした影を、内側には白色の影をつけています。影の指定をカンマで区切って追加すれば、3つ以上の影も重ねられます。先に書いた影が手前に描かれます。

色々な影のCSSサンプル

ここからは実際に影を使った表現例を紹介していきます。どれもコピペで使うことができます。

ボタンに使えそうな影

控えめにぼかし影をつけた表現です。ホバー時には影を小さく薄くしています。下の表示見本にポインターを重ねると変化を確認できます。 元のサンプルを見る

<button class="sample" type="button">BUTTON</button>

.sample {
  border: 0;
  font: inherit;
  cursor: pointer;
  display: inline-block;
  padding:5px 10px;
  color: #FFF;
  text-decoration :none;
  background: skyblue;
  box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
  transition: box-shadow .3s;
}

.sample:hover {
  box-shadow: 0 0 2px rgb(0 0 0 / 20%);
}

ぼかさない場合

もはや影と言えない形ですが、box-shadowを使って表現しています。ホバー時には影が縮みます。お好みで色を変えて使ってくださいませ。 サンプルを見る

<button class="sample" type="button">BUTTON</button>

.sample {
  border: 0;
  font: inherit;
  cursor: pointer;
  display: inline-block;
  padding:5px 10px;
  color: #FFF;
  text-decoration :none;
  background: #eb8787;
  box-shadow: 3px 3px #ffbe75;
  transition: box-shadow .3s;
}

.sample:hover {
  box-shadow: 1px 1px #ffbe75;
}

立体感を出してみた場合

insetを使って、内側にも影をつけたサンプルです。背景色に対して少し暗めの色の影にすることで立体感を表現しています。 サンプルを見る

<button class="sample" type="button">BUTTON</button>

.sample {
  border: 0;
  font: inherit;
  cursor: pointer;
  display: inline-block;
  padding:5px 10px;
  color: #FFF;
  text-decoration :none;
  background: #87b9eb;
  box-shadow: 0 2px 2px rgb(0 0 0 / 20%), 0 -4px 5px -2px #6d95ce inset;
  border-radius: 2px;
  transition: box-shadow .3s;
}

.sample:hover {
  box-shadow: 0 1px 1px rgb(0 0 0 / 20%);
}

ふんわりとした影

ぼかしを大きくすることで、ふわっとした影を作っています。影に色をつけても良いでしょう。 元のサンプルを見る

<div class="sample">これは例です</div>

.sample {
  padding: 20px;
  margin: 2em;
  max-width: 400px; /* 無くてもOK */
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 20px rgb(0 0 0 / 20%);
}

写真が浮かんでるように

画像に影をつけて浮いているように見せるサンプルです。以下のようにコードをCSSに書いておけば、影をつけたい要素にshadowというクラス名を追加するだけで影がつけられるようになります。 サンプルを見る

<img class="shadow" src="https://saruwakakun.com/wp-content/uploads/2017/08/fafa-53-e1501913737539.jpg" alt="海辺でジャンプするスケートボーダー" />

.shadow {
  max-width: 100%;
  height: auto;
  box-shadow: 5px 10px 20px rgb(0 0 0 / 25%);
}

ヘッダーで使えそうな影

ヘッダーに影を控えめにつけたサンプルを紹介します。背景との境目を少し浮かせて見せたいときに使えます。 サンプルを見る

<header>
 Header
</header>

header {
  position: relative;/*fixedの場合もありますね*/
  box-shadow: 0 3px 6px rgb(0 0 0 / 20%);
  /*以下色とかの装飾*/
  padding: 17px;
  color: #FFF;
  font-weight: bold;
  background: #4293f5;
}

こちらの記事もどうぞ