今さらな内容で特に目新しいものがあるわけではありませんが、自分用で一覧化したものが欲しかったので備忘録。
CSSのbox-shadowを使用して実装するエフェクトサンプルとシャドウエフェクトを付けたデザインを制作する際に便利な素材をいくつか紹介します。

CSSのbox-shadowで実装したエフェクトサンプル

以下はいずれも画像は使わずにCSSのbox-shadowを使用してシャドウエフェクトを実装しているサンプルで、単純にシャドウを付けたもの、内側に付けたもの、要素が浮かんでいるように見せるものなど全10種類あります。
HTMLはEffect 10以外は全てdiv要素ひとつで、共通のスタイルとして下記をCSSで指定しています。

div {
  width: 500px;
  height: 200px;
  background-color: #fff;
}

Effect 01

Effect 01

div {
  box-shadow: 0 0 15px rgba(0, 0, 0, .3);
}

Effect 02

Effect 02

内側にシャドウエフェクトを付加したもので、画像などと組み合わせればトイカメラ風みたいな表現もできます。

div {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, .3);
}

Effect 03

Effect 03

div {
  box-shadow: 0 12px 10px -6px rgba(0, 0, 0, .3);
}

Effect 04

Effect 04

div {
  position: relative;
}
div::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  right: 15px;
  z-index: -1;
  border-radius: 100px / 15px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, .3);
}

Effect 05

Effect 05

コンテンツが浮かんでいるような表現ができます。

div {
  position: relative;
}
div::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 25px;
  z-index: -1;
  width: 450px;
  height: 10px;
  border-radius: 200px / 5px;
  box-shadow: 0 40px 25px rgba(0, 0, 0, .5);
}

Effect 06

Effect 06

div {
  position: relative;
}
div::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  right: 10px;
  z-index: -1;
  border-radius: 100px / 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

Effect 07

Effect 07

div {
  position: relative;
}
div::after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 0;
  z-index: -1;
  border-radius: 30px;
  box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

Effect 08

Effect 08

コンテンツが紙のようにめくれているようなシャドウエフェクトを付加したもの。

div {
  position: relative;
}
div::before,
div::after {
  content: '';
  position: absolute;
  bottom: 10px;
  z-index: -1;
  width: 50%;
  height: 50%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .5);
}
div::before {
  left: 10px;
  -webkit-transform: rotate(-4deg);
  transform: rotate(-4deg);
}
div::after {
  right: 10px;
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}

このサンプルでは::before, ::afterの2つの擬似要素を使用していますが、どちらかを削除すれば片方だけめくれているような見栄えにできます。
他にもそれぞれの位置をわざとずらして配置したりすることで、片方は大きくめくれて、もう片方は少しだけめくれている感じの見栄えも各数値を変更するだけで表現できます。

Effect 09

Effect 09

斜め上から光が差し込んでいるようなシャドウエフェクトを実装できます。

div {
  position: relative;
}
div::after {
  content: '';
  position: absolute;
  bottom: 20px;
  right: 55px;
  z-index: -1;
  width: 50%;
  height: 100px;
  box-shadow: 100px 0 10px 15px rgba(0, 0, 0, .3);
  -webkit-transform: skew(-40deg);
  transform: skew(-40deg);
}

Effect 10

Effect 10

これまでのとは少し違うタイプで、イメージ右のようにブラウザ上部にシャドウを付けることでページに奥行きがあるように見せるものです。

body::before {
  content: '';
  position: fixed;
  top: -10px;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

デザイン制作時に便利なシャドウエフェクト素材

大体どれも似たような感じではありますが、以下はデザイン制作時などでシャドウエフェクトを使用したいというときに便利な素材です。
中には10種類以上のシャドウエフェクトが含まれているものもあり、普段からデザインでシャドウエフェクトを取り入れることが多い人は持っておくと便利だと思います。