テキストに影（ドロップシャドウ）を設定する

テキストにドロップシャドウ（影）を表示する方法を解説します。

この記事のポイント

見出しやp要素に入っている文言など、テキストコンテンツにはtext-shadowプロパティを使って影をつけることができます。（Photoshopではドロップシャドウと呼びます。）

h2 {
	position: relative;
	margin-bottom: 30px;
	font-size: 129%;
	font-weight: normal;
	color: #333;
	text-shadow: 0 0 5px #93c2eb;
}

<section>
	<h2>要素に影（ドロップシャドウ）を設定する</h2>
	<p>CSSでも影を設定することができます。<br>影の位置をX軸・Y軸で指定したり、ぼやし具合やサイズ、色などを一通り指定することができるため非常に便利です。</p>
</section>

text-shadowプロパティでは4つの値を指定しています。
1つ目がX軸の位置、2つ目がY軸の位置、3つ目は影のぼかし具合とサイズ、4つ目は影の色です。

必要に応じて、3つ目と4つ目の値は省略することができます。
影の色を省略した場合はテキストと同じ色を自動的に引き継ぎます。

color: #007ad0;
text-shadow: 2px 2px #b0d7f2;

テキストではなくブロックレベルの要素に影をかけたい場合は、別記事「要素に影（ドロップシャドウ）を設定する」をご覧ください。

影は「, (半角コンマ)」で区切って複数指定することができます。

text-shadow: 2px 2px #34a2ee, -2px -2px #79beef;

複数の影が指定されている場合は、前の影から順に上に表示されるところがポイントです。
後ろに指定された影ほど表示しては下になります。

上記コード例では「2px 2px #34a2e」が前に表示され、2つ目の影である「-2px -2px #79beef」は後ろに表示されます。

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。