ツールを実行
このツールは、テキストに影をつけるためのCSSコード（text-shadow宣言）を簡単に作成できます。水平方向と垂直方向の位置ずれ（オフセット）、影のぼかし具合、そして色を数値やテキストで入力するだけで、すぐに使えるCSSコードが出力されます。各項目は任意であり、値を入力しない場合は既定値が自動的に適用されます。例えば、オフセットを1px、ぼかしを2px、色を半透明の黒に設定すると、自然な浮き上がり効果を得られます。ゼロ値も有効なので、ぼかしのみを使ったグロー効果の作成にも対応しています。生成されたコードはピクセル単位で記述され、末尾にセミコロンが付くため、スタイルシートへ直接コピーして利用可能です。デザイン調整時の試行錯誤を減らし、視認性を高める装飾を素早く実装したい場合に便利です。
使い方
- 水平オフセット（Offset X）の数値を入力します。未入力の場合は1が適用されます。
- 垂直オフセット（Offset Y）の数値を入力します。未入力の場合は1が適用されます。
- ぼかし半径（Blur）の数値を入力します。未入力の場合は2が適用されます。
- 影の色（Color）をHEXコードなどで入力します。未入力の場合は#00000033が適用されます。
- 「実行」ボタンをクリックし、表示されたCSSコードをコピーします。
使用例
- オフセット2、ぼかし4、色#333333：太めの影で強調表示
- オフセット0、ぼかし10、色#00000080：ぼかしのみを使用したグロー効果
よくある質問
値を入力しなかった場合はどうなりますか？
各パラメータには既定値が設定されており、水平・垂直オフセットは1、ぼかしは2、色は#00000033として計算されます。
ゼロ（0）を入力することはできますか？
はい、オフセットやぼかしに0を指定することが可能です。これにより、位置ずれのない純粋なぼかし効果などを作成できます。
出力されるコードの形式はどうなっていますか？
数値はpx単位で記述され、色の指定と共にtext-shadowプロパティの値として出力されます。文末にはセミコロンが含まれます。