box-shadowを少し綺麗に見せる工夫

結論

spread-radiusを指定し、影の広がりを調整する。

実装

box-shadowプロパティのドキュメントを参照してみるとbox-shadowには以下4つの値を指定できるとあります。


offset-x | offset-y | blur-radius | spread-radius | color


【offset-x,offset-y】：x,y方向へ影を延ばす距離
【blur-radius】：影をぼかす度合い
【spread-radius】：影の広がりの度合い
(正の値が指定された場合、影がその分だけ拡張され大きくなり、負の値が指定された場合、影は縮小される。)
【color】：色
上記を踏まえてcssを実装します。

<div class="card1">spread-radius指定無し</div>
<div class="card2">spread-radius指定有り</div>

.card1 {
  box-shadow: 0 2.5rem 2rem hsl(0 0% 0% / 20%);
  }
.card2 {
  box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%);
  }

これで下の画像のように、影の広がりを調整することで少しシャープな影を作り出すことができたかと思います。

本記事については既にご存知の方が多いかもしれませんが、自分は今に至るまでちゃんと理解していなかったので、ポイントをまとめてみました。