【CSS】box-shadowで要素に影を作るには？透過画像で使えるdrop-shadowも解説

CSSを使って、要素に影をつけたいときがありますよね。

昔からあるやり方で、CSSのbox-shadowを使うと要素の影を作成できます。

ただし、この方法は、透過した画像やSVGで作成したアイコンや文字には、上手く効かないことがあります。

今回は、CSSを使って要素に影をつけたいという方のために、以下の2つの指定方法を紹介します。

この記事を読めば、CSSで要素に影をつけるbox-shadowとdrop-shadowの違いや使い方が分かるようになりますよ

ぜひ最後まで読んでくださいね！

box-shadowとは？

box-shadowは、要素のフレームの周囲に影をつけることができるプロパティです。

昔からある方法で、ほとんどの要素の影を作成できることから、多くのサイトで使用されています。

border-radiusで、要素の角が丸くなっている場合にも、その丸みが影に反映されます。

具体的には、以下のように記述します。

.sample {
  width: 100px;
  height: 100px;
  background: green;
  box-shadow: 10px 5px 5px 3px rgba(0, 0, 0, 0.2);
}

緑色のボックスを作成しました。ボックスの右下に影ができていますね。

いくつか例を紹介しながら、値について解説していきましょう。

影のぼかしをなくす

box-shadowは最大4つの長さの値を指定します。

1つ目は、X方向（水平）のオフセット距離で、正の値で右側に移動します。

2つ目は、Y方向（垂直）のオフセット距離で、正の値で下へ移動します。

3つ目はぼかしの長さとなるのですが、これを0にすることでぼかしのない、くっきりとした影を作成します。

.sample01 {
  width: 100px;
  height: 100px;
  background: green;
  box-shadow: 5px 5px;
}

これにより、右と下に5pxずつずれた影が表示されます。

後ろにカラーコードなどの色を指定して、影の色を違うものにすることもできます。

上下左右に影をぼかして表示

3つ目の値を入れると、影をぼかすことができます。値が大きいほど端のぼかしが強くなります。

要素の影を中央に配置し、色を変えてみましょう。

.sample02 {
  width: 100px;
  height: 100px;
  background: green;
  box-shadow: 0 0 7px gray;
}

影のオフセット距離を両方とも0にすることで、中央に位置させて影が全体に広がっています。

影のぼかしの長さは7pxにしています。ぼかしの長さや色を変えて色々試してみてください。

影の広がり方を変える

4つ目の値は、影の広がりを指定することができます。正の値で影が拡大し、負の値では縮小します。

.sample03 {
  width: 100px;
  height: 100px;
  background: green;
  box-shadow: 0px 0px 15px -5px;
}

最後の「-5px」をつけた場合とそうでない場合で、影の大きさが変わっていますね。

影を内側にする

box-shadowの値の中にinsetを入れると、外側の影が内側に入るようになります。

.sample04 {
  width: 100px;
  height: 100px;
  background: green;
  box-shadow: 5px 5px 4px inset;
}

内側に影がかかりました。insetがある場合とない場合で、表示の違いを確認してみましょう。

影を複数つける

間をカンマで区切って複数の影を指定することができます。

.sample05 {
  width: 100px;
  height: 100px;
  background: green;
  box-shadow: -3px -3px red, 3px 3px 8px blue;
}

要素の内側と外側の両方に影をつける、といったデザインも可能です。

透過画像に使えるdrop-shadow

box-shadowは、CSSのみで簡単に要素に影をつけることができるプロパティなのですが、使いどころによっては不便な部分もあります。

透過画像やSVGなどのデータに影をつけたい場合です。

元の形が四角形であれば問題ないですが、その他の図形だった場合にも、自然な影ではなく、ボックスにできるような影がついてしまいます。

これは、CSSの「filter: drop-shadow()」を使うことで解決できます。

以下のように指定します。

.sample {

  filter: drop-shadow(10px 10px 5px gray);
}

これにより、複雑な図形にも自然な影をつけることができました。

ただし、ぼかしの計算方法がbox-shadowと異なることから、同じ数値にしても同じ影が表示されるわけではありません。

実際に確認して調整していく必要がありますね。

また、影を内側にするinsetは使用できません。4つ目の数値も指定できないので、間違えて書かないように注意しましょう。

まとめ：box-shadowとdrop-shadowの違いを知っておこう

今回は、要素に影をつけるCSSのbox-shadowについて解説してきました。

似たような機能を持つdrop-shadowについても紹介しましたね。

書き方が少し異なり、値についても、影を内側にするinsetがないなど気をつけるべき点があります。

状況に合わせて使い分けていきましょう。今回の記事が参考になれば幸いです。