text-shadowジェネレーター

文字に影を落とすのによく使われるtext-shadowを確認するためのジェネレーターです。
各種プロパティなどページ下部に詳しい説明を書いてあります。

text-shadow

/* preview */
color: #333;

/* text-shadow */
text-shadow: 3px 3px 1px rgba(0,0,0,0.3);

color：#333

text-shadowの設定

x：3px

y：3px

blur：1px

shadow-color：rgba(0,0,0,0.3)

text-shadowのプロパティについて

Text Shadow

text-shadow: 左右の位置 上下の位置 色;

text-shadow: 2px 2px #f00;

まず基本的な設定としては、左から何px / 上から何px / 色を指定してください。
左右および上下に関してはマイナスの数値を指定することもできます。

Text Shadow

text-shadow: 左右の位置 上下の位置 ぼかし 色;

text-shadow: 2px 2px 6px #f00;

ぼかし(blur)も設定することができます。
なおぼかしについてはマイナスの数値は指定することはできません。

Text Shadow

text-shadow: 左右の位置 上下の位置 ぼかし 色, 左右の位置 上下の位置 ぼかし 色;

text-shadow: 2px 2px 6px #f00, 0px -1px 6px #0f0;

カンマで区切ることで複数の影を設定することができます。

text-shadow: 左右の位置 上下の位置 ぼかし 色, ...;

左右の位置や上下の位置、どれくらい影をぼかすかを設定するかなどができます。