offset-x / offset-y影をずらす位置
最初の2つの長さで横と縦の位置を決めます。負の値では左や上へ影が移動します。
text-shadow
文字の形に沿って影や光彩を重ねるプロパティ。影の位置・ぼかし・色を動かし、文字本体を固定したまま違いを比べます。
CSSのtext-shadowとは？
影の横・縦位置、ぼかし、色をライブプレビューで操作しながら、初期値、複数の影、読みやすく使うポイントを初学者向けに解説します。
遊んでみよう
文字本体を固定して影だけを変更
TEXT-SHADOW見える開発
CSS
.element text-shadow: 4px 4px 6px #7258e8;
値のパターン
text-shadowの構成要素
blur-radius影の輪郭をぼかす
3つ目の長さは省略でき、初期値は0です。大きくするほど影が広く薄く見え、負の値は使えません。
color影の色を選ぶ
色は長さの前後どちらにも書けます。ブラウザー間で同じ見た目にするなら明示します。
shadow, shadow複数の影を重ねる
カンマで区切ると複数の影を重ねられ、先に書いた影ほど手前に描かれます。
早見表
初期値はnoneです。影を作るときは横位置と縦位置が必須で、その後ろへぼかしと色を加えます。
01
none文字へ影を描かない初期値02
4px 4px #202033右下へ輪郭のくっきりした影基本03
0 6px 12px #7258e8下へずらしたやわらかい影ぼかし04
0 0 16px #7258e8文字の周囲へ広がる光彩ずらさない05
-4px -4px 2px #d9472b左上へずらした影負の値06
2px 2px #202033, 5px 5px #7258e82色の影を重ねる複数よくある使い方
01
見出しへ奥行きを加える
右下へ小さくずらした影を加え、文字色を保ったまま見出しを背景から浮かせます。
text-shadow: 3px 3px 0 #d9d2ff;02
暗い背景で光彩をつくる
影をずらさずにぼかすと、文字の周囲へ均等に広がる光のような効果を作れます。
text-shadow: 0 0 12px #dafa65;03
複数の影でレトロな文字を作る
色と距離の異なる影をカンマで重ね、段差のある立体的な文字を表します。
text-shadow: 2px 2px #ffc4b7, 5px 5px #7258e8;ポイント
影を文字の輪郭より強くしすぎない。
text-shadowは文字とtext-decorationの形に沿って影を描き、要素の寸法や周囲の配置は変えません。初期値はnoneで、すべての要素と::first-letter・::first-lineへ適用でき、子要素へ継承されます。横・縦の位置には負の値を使えますが、ぼかし半径は負にできません。複数の影はカンマで区切り、先に書いた影ほど手前に描かれます。値は影のリストとしてアニメーションできます。強いぼかしや文字色に近い影は輪郭を曖昧にするため、背景とのコントラストと小さい画面での読みやすさを確認します。
関連するCSSも見てみよう。
text-shadow と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。