文字の影をスライダーで調整し、text-shadowのCSSを生成します。背景画像の上の見出しを読みやすくしたいときにも使えます。
書き方
box-shadowと違い、spread（広がり）の値はありません。複数の影をカンマ区切りで重ねられる点は共通です。
text-shadow: 0 2px 4px rgba(0,0,0,0.4);
│ │ │ └ 色
│ │ └ ぼかし
│ └ 縦のずれ
└ 横のずれ実用的な使い方
4方向に影を置くと縁取りのように見えます。より正確な縁取りが必要なら、-webkit-text-stroke や paint-order の利用も検討してください。
/* 背景画像の上で文字を読みやすく */
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
/* 縁取り（アウトライン）風 */
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff,
-1px 1px 0 #fff, 1px 1px 0 #fff;使いすぎに注意
強い影は文字の輪郭をぼやけさせ、かえって読みにくくなります。本文には使わず、背景の上に載る見出しなど必要な箇所に限定するのが基本です。
よくある質問
Q box-shadowとの違いは？
text-shadowは文字の形に沿った影で、spread（広がり）の値がありません。
Q 縁取りはできますか？
4方向に影を置くと縁取り風になります。より正確な表現には -webkit-text-stroke を使う方法もあります。
Q 影を複数重ねられますか？
できます。カンマ区切りで並べると、書いた順に重なります。
Q 本文に使ってもいいですか？
読みにくくなるためおすすめしません。背景の上の見出しなど、必要な箇所に限定してください。