エフェクト

box-shadow

影を指定します

valuedescription
5px -5px 20px rgba(147, 150, 173, 0.81)x 方向のずれ、y 方向のずれ、ぼかしの強さ、影の色を指定する
5px -5px 20px 5px rgba(147, 150, 173, 0.81)x 方向のずれ、y 方向のずれ、ぼかしの強さ、拡張距離、影の色を指定する
-30px 15px 0px 0px #AFCCAF, 5px -5px 12px 2px rgba(209, 56, 29, 0.81)複数の影を指定する
none (default)影を表示しない

Demo

x: 5px
y: -5px
ぼかし: 3px

color: #bcbcbc
x: 5px
y: -5px
ぼかし: 10px

色: #bcbcbc
x: 7px
y: -5px
ぼかし: 0px
拡大: 1px
色: #8d8d8d
x: 5px
y: -5px
ぼかし: 3px
拡大: 1px
色: #9edbb3
x: -5px
y: 5px
ぼかし: 3px
拡大: 1px
色: #dba19e
inset
x: 5px
y: -5px
ぼかし: 3px

色: #dedede

x: 0
y: 0
ぼかし: 0
拡大: 2px
色: #5a6ff9
<div class="wrapper">
  <div class="box box-1">
    x: 5px<br />
    y: -5px<br />
    ぼかし: 3px<br />
    <br />
    color: #bcbcbc
  </div>
  <div class="box box-2">
    x: 5px<br />
    y: -5px<br />
    ぼかし: 10px<br />
    <br />
    色: #bcbcbc
  </div>
  <div class="box box-3">
    x: 7px<br />
    y: -5px<br />
    ぼかし: 0px<br />
    拡大: 1px<br />
    色: #8d8d8d
  </div>
  <div class="box box-4">
    <div>
      x: 5px<br />
      y: -5px<br />
      ぼかし: 3px<br />
      拡大: 1px<br />
      色: #9edbb3
    </div>
    <div>
      x: -5px<br />
      y: 5px<br />
      ぼかし: 3px<br />
      拡大: 1px<br />
      色: #dba19e
    </div>
  </div>
  <div class="box box-5">
    inset<br />
    x: 5px<br />
    y: -5px<br />
    ぼかし: 3px<br />
    <br />
    色: #dedede
  </div>
  <div class="box box-6">
    <br />
    x: 0<br />
    y: 0<br />
    ぼかし: 0<br />
    拡大: 2px<br />
    色: #5a6ff9
  </div>
</div>
.box-1 {
  box-shadow: 5px -5px 3px #bcbcbc;
}
.box-2 {
  box-shadow: 5px -5px 10px #bcbcbc;
}
.box-3 {
  box-shadow: 7px -5px 0px 1px #8d8d8d;
}
.box-4 {
  box-shadow: 5px -5px 3px #9edbb3, -5px 5px 3px #dba19e;
}
.box-5 {
  box-shadow: inset 5px -5px 3px #dedede;
}
.box-6 {
  box-shadow: 0 0 0 2px #5a6ff9;
}

.box {
  width: 100%;
  height: 120px;
  border: 1px solid rgb(188, 188, 188);
  color: #333333;
  font-size: 12px;
  padding: 4px;
  display: flex;
  justify-content: space-between;
}
.wrapper {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
}

概要

影を指定します。 box-shadowにはわかりづらいパラメータが多く、さらに複数の影を重ねる場合も多いため非常にややこしいです。 ボックスの影作成ツールなどで実際にパラメータをいじってみると直感的に理解できるでしょう。

なお、実際のアプリケーションでは、同じパラメータを使い回すことがほとんどです。そのため、影の生成はツールに頼るのも一つの手です。

valuedescription
offset-x(1 つ目の値)影を x 軸方向へずらす距離
offset-y(2 つ目の値)影を y 軸方向へずらす距離
blur-radius(3 つ目の値)影のぼかし度合い(省略可)
spread-radius(4 つ目の値)影を拡大する距離(blur-radiusも同時に指定する必要あり、省略可)
color(5 つ目の値)影の色
insetinsetを指定することで、影を内側に落とすことができる

パラメータ

offset-x

影の x 軸方向への移動距離を指定します。

4px
4px 0px 3px #bcbcbc
8px
8px 0px 3px #bcbcbc
16px
16px 0px 3px #bcbcbc
32px
32px 0px 3px #bcbcbc

offset-y

影の y 軸方向への移動距離を指定します。

4px
0px 4px 3px #bcbcbc
8px
0px 8px 3px #bcbcbc
16px
0px 16px 3px #bcbcbc
32px
0px 32px 3px #bcbcbc

blur-radius

影の y 軸方向への移動距離を指定します。

4px
5px 5px 4px #bcbcbc
8px
5px 5px 8px #bcbcbc
16px
5px 5px 16px #bcbcbc
32px
5px 5px 32px #bcbcbc

spread-radius

影の拡大度合いを指定します。

4px
5px 5px 3px 4px #bcbcbc
8px
5px 5px 3px 8px #bcbcbc
16px
5px 5px 3px 16px #bcbcbc
32px
5px 5px 3px 32px #bcbcbc

color

影の色を指定します。

#cbd5e1
5px 5px 3px #cbd5e1
#94a3b8
5px 5px 3px #94a3b8
#475569
5px 5px 3px #475569
#0f172a
5px 5px 3px #0f172a

inset

影の向きを変更します

5px 5px 3px #bcbcbc
inset
inset 5px 5px 3px #bcbcbc

応用

複数の影を重ね合わせる

5px 5px 3px #bcbcbcのようなパラメータを、カンマ区切りで複数指定することで、影を重ね合わせることができます。

重ね合わせるケースってあるの?と思ってしまいますが、意外なことに、違和感のない表現をするために複数の影を重ねる場合があります。 以下の 2 つは複数の影を重ね合わせている例ですが、どちらも自然な表現になっていると思います。

2個を重ね合わせ
rgba(0, 0, 0, 0.15) 0px 15px 25px
rgba(0, 0, 0, 0.05) 0px 5px 10px
1つ目の影
rgba(0, 0, 0, 0.15) 0px 15px 25px
2つ目の影
rgba(0, 0, 0, 0.05) 0px 5px 10px
2個を重ね合わせ
rgb(204, 219, 232) 3px 3px 6px 0px inset
rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset
1つ目の影
rgb(204, 219, 232) 3px 3px 6px 0px inset
2つ目の影
rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset

参照

アウトラインをbox-shadowで再現する

outlineは、アウトラインを指定するプロパティで、フォーカス時のデザインによく用いられます。 例えば以下のフォームをクリックしてみてください。

青い枠線が表示されたと思います(環境によっては色が異なるかもしれません)。これがoutlineで、ブラウザデフォルトの挙動として指定されています。

このoutlineですが、一つ厄介な点があります。それは、一部のブラウザ(iOS Safari など)では、border-radiusが適用されないのです。 以下は iOS Safari での見た目です。アウトラインが角張った長方形で表示されており、良いデザインとは言えません。 img

そこでbox-shadowを用いてoutlineのような表現を行うテクニックを用いる場合があります。 outlineとほぼ同様のデザインを実現することができます。

<div class="wrapper">
  <input type="text" class="input" placeholder="outline" />
  <input type="text" class="input input-shadow" placeholder="box-shadow" />
</div>
.input-shadow:focus {
  /* アウトラインを非表示に */
  outline: none;
  /* 代わりにbox-shadowでアウトラインを表示 */
  box-shadow: 0 0 0 2px #5a6ff9;
}

.input {
  padding: 8px 20px;
  border: 1px solid rgb(156, 163, 175);
  background: rgb(71, 85, 105);
  border-radius: 999px;
}
.input::placeholder {
  color: rgb(209, 213, 219);
}
.wrapper {
  display: flex;
  justify-content: space-around;
}

参照