影を操れ！box-shadowの使い方を分かりやすく解説します

2018年1月3日2021年11月26日

マテリアルデザインで欠かせないものが「影」。

影を操るものはマテリアルデザインを制します。ということで、CSSで影を表現するbox-shadowについて、使い方のおさらいをしておきましょう。

はにわまん

影があると少しリッチな雰囲気になることが多いです！

基本的な使い方

box-shadowは、6つの値を指定できます。

基本的な設定イメージは以下のとおり。

.box-shadow {
	box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.4) inset;
}

<div class="box-shadow"></div>

右から順番に言葉で表すと、

指定場所 / 説明
box-shadow: `1px` 1px 3px 2px rgba(0,0,0,0.4) inset; 水平方向の影の距離。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
box-shadow: 1px `1px` 3px 2px rgba(0,0,0,0.4) inset; 垂直方向の影の距離。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
box-shadow: 1px 1px `3px` 2px rgba(0,0,0,0.4) inset; ぼかし距離。値が大きいほど影がぼやけます。（負の値は指定できません）
box-shadow: 1px 1px 3px `2px` rgba(0,0,0,0.4) inset; 広がりの距離。正の値を指定すると影の形状を「全方向」に拡大、負の値を指定すると縮小します。
box-shadow: 1px 1px 3px 2px `rgba(0,0,0,0.4)` inset; 影の色。rgbaで指定されることが多いです。
box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.4) `inset`; 指定すると影が内側に表示される（内側に表示させたい時だけ書く。基本は省略）

注意点

box-shadowを使う上での注意点をまとめておきます。

余白を作っておくこと

box-shadowはブロック要素の外側に存在します。したがって、余白がない場合は、影が見えなくなります。

影を指定していますが、影が消えているのが分かります。

<div class="box-shadow-wrapper">
	<div class="box-shadow-space"></div>
</div>

.box-shadow-wrapper {
	width: 100px;
	height: 100px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	overflow: hidden;
}
.box-shadow-space {
	width: 100px;
	height: 100px;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.4);	
}

内側のボックスを小さくして余白を確保してみます。

<div class="box-shadow-wrapper">
	<div class="box-shadow-space"></div>
</div>

.box-shadow-wrapper {
	width: 100px;
	height: 100px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	overflow: hidden;
}
.box-shadow-space-min {
	width: 90px;
	height: 90px;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.4);	
}

透過画像に使うとおかしくなる

pngやsvgなどの画像の背景に透過処理を施している要素に対しては、box-shadowでは意図した影にならない可能性があります。

box-shadowではなく、filter: drop-shadow()を使うといいでしょう。

透過画像に`box-shadow`を適応した場合

画像の外側に影が落ちます。

<div class="box-shadow-png"><img src="hoge.png"></div>

.box-shadow-png img {
	box-shadow: 5px 5px 3px 0 rgba(0,0,0,0.4);
}

透過画像に`drop-shadow`を適応した場合

画像の外側ではなく、透過以外のオブジェクトに影が落ちます。

<div class="drop-shadow-png"><img src="hoge.png"></div>

.drop-shadow-png img {
	filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.4));
}

影の実用例

box-shadowの実用的に使われる例を紹介していきます。

ベーシックな影

下、右に影を落とす、box-shadowのもっとも基本となる影の作り方です。

<div class="box-shadow-base"></div>

.box-shadow-base {
	width: 100px;
	height: 100px;
	box-shadow: 5px 5px 3px 0 rgba(0,0,0,0.4);
	margin: 0 auto;
}

上下左右にぼかす影

垂直方向と、水平方向の値を0にします。「ぼかしの大きさ」と、全方向への「ぼかしの距離」を指定することで、ボックスの周りに「ぼやけた」影を落とすことができます。

<div class="box-shadow-blur"></div>

.box-shadow-blur {
	width: 100px;
	height: 100px;
	box-shadow: 0 0 3px 2px rgba(0,0,0,0.4);
	margin: 0 auto;
}

影の大きさを小さくする

box-shadowの4つ目の値の指定で影の大きさを指定できます。全方位の距離に適応される値ですので、影の面積を決める際に使用しましょう。

値をマイナスにすると小さくなり、プラスにすると大きくなります。

<div class="box-shadow-size"></div>

.box-shadow-size {
	width: 100px;
	height: 100px;
	box-shadow: 20px 20px 3px -10px rgba(0,0,0,0.4);
	margin: 0 auto;
}

第二の「border」として使う

ちょっと変わった使い方。box-shadowはクッキリとした線も表現できます。従って、borderの上にborderを重ねる（実際にはbox-shadowですが、）といった使い方もできます。

ポイントは1から3番目までの値は0にして、4番目の値だけを指定することです。

<div class="box-shadow-border"></div>

.box-shadow-border {
	width: 100px;
	height: 100px;
	border: 8px solid rgba(0,0,0,0.2);
	box-shadow: 0 0 0 8px rgba(0,0,0,0.4);
	margin: 0 auto;
}

舞空術

作ってみたかったので、ちょっとネタ的な。。
※ box-shadowとは関係ありません。

空中に浮かび上がってる的な影を作ってみます。

<div class="box-shadow-float"></div>

.box-shadow-float {
	width: 100px;
	height: 100px;
	border: 1px solid rgba(0,0,0,0.3);
	margin: 0 auto 50px;
	position: relative;
}
.box-shadow-float::after {
	width: 90px;
	height: 30px;
	content: '';
	background: rgba(0,0,0,0.4);
	position: absolute;
	border-radius: 90px / 30px;
	bottom: -40px;
	left: 50%;
	transform: translateX(-50%);
}