Text Shadow ジェネレーター

X·Yオフセット、ぼかし、色をスライダーで調整してテキスト影を作成。レイヤーを重ねるとネオン·アウトライン·3D効果まで作れます。

JiniTools
80px

シャドウレイヤー

CSS
 

使い方

1
レイヤー調整

レイヤーごとにX·Yオフセット、ぼかし、色を設定。スライダー操作でプレビューが即時更新。

2
レイヤー追加/削除

+ボタンで影レイヤーを最大5個まで重ねられます。多層化でネオン、アウトライン、紙折り風効果などを作成。

3
コードコピー

結果のtext-shadow CSSをワンクリックでコピー。フォント·サイズ·色·背景もプレビューで一緒に確認。

よくある質問

何層まで重ねられますか?

最大5層です。ネオンは4〜5層、アウトラインは4層で十分です。

spread値はないのですか?

はい。CSS仕様上、text-shadowはspread値がなくX·Y·ぼかし·色の4つだけです(box-shadowと異なる)。

テキストアウトラインはどう作る?

同じ色の影を4つ(1,0)/(-1,0)/(0,1)/(0,-1)にぼかし=0で配置するとアウトラインのように見えます。太いアウトラインなら-webkit-text-strokeの使用を推奨。

プレビューフォントが違うのに結果は同じ?

プレビューはシステム既定フォントを使用しますが、text-shadow CSSはどのフォントにも同じように適用されます。太いフォントほど影も太く見えます。

サーバーに送信されますか?

いいえ。すべての処理はブラウザ内で行われ、生成されたCSSが外部に送信されることはありません。