エフェクト

box-shadow

影を指定します

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

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

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

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 での見た目です。アウトラインが角張った長方形で表示されており、良いデザインとは言えません。

そこで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;
}

box-shadow

Demo

概要

パラメータ

offset-x

offset-y

blur-radius

spread-radius

color

inset

応用

複数の影を重ね合わせる

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

参照

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