エフェクト

box-shadow

box-shadow は要素の枠の外側（または内側）に影を落とします。カンマで区切って複数の影を重ねられます。

構文

none | <shadow>#

<shadow> = <color>? && [ <length>{2} <length [0,∞]>? <length>? ] && inset?

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  box-shadow: 0 1px 2px #0f172a1f, 0 16px 40px -8px #0f172a40;
}

影 1

inset

offset-x

offset-y

blur-radius

spread-radius

color

影 2

inset

offset-x

offset-y

blur-radius

spread-radius

color

1 つ目と 2 つ目は横・縦のずれ（offset）です。正の値で右・下にずれます。
3 つ目はぼかし（blur）です。大きいほど広く薄くなり、負の値は指定できません。省略すると 0（くっきりした影）です。
4 つ目は広がり（spread）です。正の値で影が大きく、負の値で小さくなります。負の spread と大きめの blur を組み合わせると、下にだけふわっと落ちる自然な影になります。

色を省略すると currentcolor（文字色）になります。inset を付けると、影が枠の内側に描かれます。

複数の影は先に書いたものが上に重なります。影はレイアウトに影響しないので、付けても要素のサイズや周りの位置は変わりません。また影は border-radius の角丸に沿って描かれます。