本文へスキップ
T

テキストシャドウ生成

多重text-shadowを視覚的に設計。

Aa

  • 不透明度40%
    横2px
    縦2px
    ぼかし4px
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);

text-shadow はオフセット・ぼかし・色のみです（box-shadow の spread / inset はありません）。複数レイヤーをカンマ区切りで重ねられます。初期値は 2px 2px 4px @ 40%。

テキストシャドウ生成について

text-shadowジェネレーターは、文字に落とす影のオフセット、ぼかし、色・不透明度をレイヤー単位で調整し、見出しやロゴの立体感・ネオン風グローなどを作るツールです。box-shadowと違い、spread や inset はありません。 toco.toolsではプレビュー文字を変えながらスライダーで各レイヤーを編集し、sm / md / lg / hard / neon / emboss などのプリセットから始められます。完成した `text-shadow` 宣言をそのままコピーできます。 すべてブラウザ内で処理され、設定はサーバーに送られません。

使い方

  1. プリセットを選ぶかレイヤーを追加
  2. オフセット・ぼかし・色を調整
  3. プレビューを確認してCSSをコピー

よくある質問（FAQ）

text-shadowジェネレーターとは何ですか？

CSSのtext-shadow値を視覚的に作り、コピーできるツールです。

box-shadowとの違いは？

text-shadowは文字用で、オフセット・ぼかし・色のみです。広がり（spread）や inset はありません。

複数の影を重ねられますか？

はい。複数レイヤーをカンマ区切りのtext-shadowとして出力します。

設定は外部に送られますか？

いいえ。すべてブラウザ内で処理されます。