Text Shadow ジェネレーター
X·Yオフセット、ぼかし、色をスライダーで調整してテキスト影を作成。レイヤーを重ねるとネオン·アウトライン·3D効果まで作れます。
JiniTools
シャドウレイヤー
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が外部に送信されることはありません。