このツールについて
文字の形に沿って影を付けるツールです。位置、ぼかし、色、不透明度を設定できます。プレビューには通常のテキストとして表示するため、HTMLタグを入力してもページのコードとして実行されません。
使い方
- プレビューに表示したい文字を入力します。
- 水平・垂直オフセットと、0以上のぼかし半径を調整します。
- 影の色と不透明度を選び、文字の変化をリアルタイムで確認します。
- CSSをコピーするか、「リセット」で初期設定に戻します。
使用例
- 小さなオフセットと低い不透明度を組み合わせると、控えめな文字の影になります。
- オフセットを0、ぼかしを大きめにすると、柔らかく発光するような効果を試せます。
- 日本語、英語、記号を入力して、字形による影の違いを比較できます。
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);仕組みとCSSの解説
text-shadowはoffset-x offset-y blur-radius colorの形式です。文字の形に適用され、spread-radiusやinsetはありません。影の色は、検証済みの色成分と不透明度から生成します。
主な用途
- 見出しやポスターの文字効果を調整する。
- ブランドのコピーに柔らかい影を付ける。
- 文字の影とボックスの影で設定項目がどう違うか学ぶ。
プライバシーについて
入力、計算、CSSの生成、プレビューはすべてお使いのブラウザー内で完結します。入力内容をアップロードせず、バックエンド、データベース、オンラインAPI、外部CDNも使用しません。入力の自動保存も行いません。
FAQ
text-shadowとbox-shadowの違いは何ですか？
text-shadowは文字の形に沿って描画され、box-shadowは要素のボックスに適用されます。
text-shadowにspreadがないのはなぜですか？
標準のtext-shadow構文は、2つのオフセット、任意のぼかし、色で構成されており、広がり半径は定義されていません。
複数のtext-shadowを設定できますか？
CSSではカンマ区切りで文字の影を重ねられます。このページでは1層の影を生成します。
プレビュー文字に含まれるHTMLは実行されますか？
いいえ。入力はテキストノードで表示するため、タグやスクリプトの記述もそのまま文字として扱います。