1つの要素に複数の影（ドロップシャドウ）を設定する

1つの要素に対して複数の影（ドロップシャドウ）を設定する方法を解説します。

この記事のポイント

要素に2つ以上の影をかける

1つのHTML要素に複数の影をつける

CSSのbox-shadowプロパティを使うと要素の外側、内側に自由に影をつけることができますが、影は必要に応じて複数指定することが可能です。

例えば、次のように内側と外側の両方に影をつけたりすることができます。

2つの影を設定している例

コード例

box-shadow: 0 0 10px 0px rgba( 100, 100, 100, 0.5), inset 0 0 0 5px #cae0f3;

box-shadowプロパティでは「, (半角コンマ)」で区切って、外側の影「0 0 10px 0px rgba( 100, 100, 100, 0.5)」と、内側の影「inset 0 0 0 5px #cae0f3」を指定しています。
同じ方法で3つ、4つとさらに影を増やすことも可能です。

2つ以上の影を適用して影同士が重なった場合については、box-shadowプロパティの先頭から指定している影を前面にして、2つ目の影はその後ろに表示、3つ目はさらに後ろに表示…という優先度になります。