最終更新日 2022.01.7
CSS

CSSのtext-shadowで文字に影を付ける！おしゃれなサンプルと使い方をご紹介

CSSの「text-shadow」プロパティを使えば文字に影を付ける事ができます。以前は文字の装飾をしようと思えばPhotoshopなどのソフトで加工した文字を画像として扱っていました。

ですが現在では文字の装飾をCSSで簡単におこなう事ができます。これはスゴくありがたい、文字はできるだけ画像よりもテキストとして表示する方がSEO的にも評価されますしね。

文字を装飾すれば見出しの文字を目立たせる事もできますし、よく使うところで言うと、写真などの上に記述するテキストも背景に埋もれる事なくハッキリと表示する事ができます。

目次 [閉じる]

text-shadowの使い方
text-shadowのサンプル

text-shadowの使い方

それでは「text-shadow」の使い方を見ていきましょう。設定によっては複雑なものもありますが、基本の形は簡単なのでまずはこちらを覚えておけばOKです。

            
                text-shadow: 横方向の位置 縦方向の位置 ぼかし半径 色;

text-shadowプロパティは、「横方向の位置」「縦方向の位置」「ぼかし半径」「色」の順で記述します。横方向の位置・縦方向の位置・ぼかし半径は数値で設定し、色は英字・16進数・rgbaのいずれかの方法で指定します。

            
                text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);

具体的な記述は上記のようになります。このうちtext-shadowの設定では、ぼかし半径と色を省略する事ができます。ただし、横方向の位置と縦方向の位置の記述は必須です。

            
                text-shadow: 1px 1px rgba(0, 0, 0, 0.8);

ぼかしが「0」の場合は、上記のように記述を省略する事ができます。ぼかしの値が「0」なので影は文字と同じようにハッキリと表示される事になります。

            
                text-shadow: 1px 1px;

さらに、ぼかしが「0」で色も省略するなら上記のように記述します。このように色を指定しない場合は、文字色と同じ色が影にも適応される事になります。

横方向の位置と縦方向の位置に関しては「-（マイナス）」の指定も可能です。

横方向の指定の場合、「1px」とすると右方向に1px移動し、「-1px」とすると左方向に1px移動します。同じように縦方向の指定の場合、「1px」とすると下方向に1px移動し、「-1px」とすると上方向に1px移動する事になります。

            
                text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);

ちょっと複雑な設定をおこなうのであれば、text-shadowの設定同士を「,（カンマ）」で繋ぐ事によって、ひとつの指定でいくつもの影を設定する事が可能です。

text-shadowのサンプル

text-shadowプロパティを使用したサンプルをいくつかご紹介しますので、こちらの設定を基にご自身でカスタマイズしてみてください。いろいろと数値やカラーを変えてもらえば好みのパターンも見つかるハズです。

text-shadow

まず上記の「text-shadow」は何も設定がされていないデフォルトの文字です。こちらをベースにいくつかのパターンを作ってみましたのでご確認ください。

01.ドロップシャドウ

text-shadow

            
                .example01 {
                  color: #3ee882;
                  text-shadow: 3px 3px 5px rgba(14, 51, 29, 0.5)
                }

02.アウトライン

text-shadow

            
                .example02 {
                  color: #fff;
                  text-shadow: -1px -1px #fb2eef,  -1px 1px #fb2eef,  1px -1px #fb2eef,  1px 1px #fb2eef
                }

03.3D

text-shadow

            
                .example03 {
                  color: #fee724;
                  text-shadow: -1px 0px #04dbff, 0px -1px #04dbff, 0px 1px #04dbff, 1px 0px #04dbff, 1px -2px #04dbff, 2px -3px #04dbff, 3px -4px #04dbff, 4px -5px #04dbff, 5px -6px #04dbff, 2px -1px #04dbff, 3px -2px #04dbff, 4px -3px #04dbff, 5px -4px #04dbff, 6px -5px #04dbff
                }

04.フロート

text-shadow

            
                .example04 {
                  color: #ff8c04;
                  text-shadow: 0 15px 10px rgba(255, 140, 4, 0.6)
                }

05.ブラー

text-shadow

            
                .example05 {
                  color: rgba(0, 0, 0, 0);
                  text-shadow: 0 0 6px rgba(251, 46, 83, 0.8)
                }

06.リリーフ

text-shadow

            
                .example06 {
                  color: #fff;
                  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6)
                }

07.デボス

text-shadow

            
                .example07 {
                  color: #000;
                  text-shadow: 0 1px rgba(255, 255, 255, 0.6)
                }

08.エンボス

text-shadow

            
                .example08 {
                  color: #000;
                  text-shadow: -1px -1px rgba(255, 255, 255, 0.5), 1px 1px 3px rgba(0, 0, 0, 0.5)
                }

09.フラッシュ

text-shadow

            
                .example09 {
                  color: #000;
                  text-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px #fff
                }

10.バックライト

text-shadow

            
                .example10 {
                  color: #fff;
                  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8)
                }