【CSS】 要素の「内側」に「影」を付ける方法

【CSS】要素の「内側」に「影」を付ける方法

ウェブ制作ノウハウ

2025.06.18

この記事は約1分で読めます。

記事内に広告が含まれています

こんにちは、さちです。

今回は「CSS」で、要素の内側に「影（box-shadow）」を付ける方法について書いていきます。

実装方法

表示結果

あと 57 日

<div>
  あと
  <span class="dent">5</span>
  <span class="dent">7</span>
  日
</div>

下記の CSS は、見やすいよう解説に必要な部分以外の記述を省略しています。

.dent {
  box-shadow: inset 2px 1px 7px rgb(5, 10, 5);
}

以前の記事で紹介した要素に「影」を付けるプロパティ box-shadow ですが、inset を付けることで要素の「内側」に影を付けられます。

記述の形式は下記のとおり、基本的に「外側」に影を付けるときと同じです。

box-shadow: inset 横方向の位置 縦方向の位置 [ぼかしの強さ] [拡張する量] [影の色];