text-shadow プロパティを使い文字に影をつける事が出来ます。

text-shadow プロパティ

text-shadow プロパティは影の相対的な位置、影のぼかし、影の色が指定出来ます。

text-shadow: x(左右)の位置 y(上下)の位置 ぼかし具合 影の色;

確認

前提

以下のHTMLを使用します。

HTML

<span class="shadow">あいうえお</span>

CSS

.shadow {
  font-size: 4rem;
  letter-spacing: 0.3rem;
}

結果

あいうえお

影の位置

xの位置 yの位置は共にpxで指定します。
xの位置 yの位置の指定は必須になります。なので、xの位置だけ指定したい場合でも、yの位置には0を指定する必要があります。
なお、ぼかし具合を指定せずに、影の色を指定する事も可能です。

影を右に伸ばしたい場合、xの位置に正の値を、左に伸ばしたい場合、負の値を指定します。

影を上に伸ばしたい場合、yの位置に正の値を、下に伸ばしたい場合、負の値を指定します。

HTML

<span class="shadow basic-right-up">あいうえお</span>
<br>
<span class="shadow basic-right-under">あいうえお</span>
<br>
<span class="shadow basic-left-up">あいうえお</span>
<br>
<span class="shadow basic-left-under">あいうえお</span>

CSS

.basic-right-up {
  text-shadow: 2px 2px 0px gray;
}

.basic-right-under {
  text-shadow: 2px -2px 0px gray;
}

.basic-left-up {
  text-shadow: -2px 2px 0px gray;
}

.basic-left-under {
  text-shadow: -2px -2px 0px gray;
}

結果

あいうえお
あいうえお
あいうえお
あいうえお

複数の指定

影の指定は複数行えます。これにより上下左右に影をつける事が出来ます。
これを利用して枠線のみの文字にする事が出来ます。

HTML

<span class="shadow basic">あいうえお</span>

CSS

.basic {
  text-shadow: 2px 2px 0px red, 2px -2px 0px red, -2px 2px 0px red, -2px -2px 0px red;
}

結果

あいうえお

ぼかし具合

要素の中央(上下左右)からぼけるように見えます。

HTML

<span class="shadow blur-right-up">あいうえお</span>
<br>
<span class="shadow blur-right-under">あいうえお</span>
<br>
<span class="shadow blur-left-up">あいうえお</span>
<br>
<span class="shadow blur-left-under">あいうえお</span>

CSS

.blur-right-up {
  text-shadow: 2px 2px 10px red;
}

.blur-right-under {
  text-shadow: 2px -2px 10px red;
}

.blur-left-up {
  text-shadow: -2px 2px 10px red;
}

.blur-left-under {
  text-shadow: -2px -2px 10px red;
}

結果

あいうえお
あいうえお
あいうえお
あいうえお

上下左右のぼかし

以下は要素の中央(上下左右)からぼけるように見えます。

HTML

<span class="shadow blur">あいうえお</span>

CSS

.blur {
  text-shadow: 2px 2px 10px red, 2px -2px 10px red, -2px 2px 10px red, -2px -2px 10px red;
}

結果

あいうえお

最後に

文字数が多い文章に影をつけると画面の表示が遅くなります。
したがって、タイトルのような文字数が短いものに使用しましょう。