【CSS】テキストに影をつける（text-shadow）

2025/06/25

文字を立体的に見せるテキストシャドウ

テキストに影をつけることで、文字が浮き上がって見えたり、読みやすさが向上します。text-shadowプロパティで簡単に追加可能です。

text-shadow:　横のズレ縦のズレぼかしの範囲色　; となるイメージです。


.title {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.title {

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

}


.title {
  text-shadow: 1px 1px 0 #fff, 2px 2px 4px rgba(0,0,0,0.3);
}

.title {

text-shadow: 1px 1px 0 #fff, 2px 2px 4px rgba(0,0,0,0.3);

}

よかったらシェアしてね！