🖋️ CSS テキストシャドウ生成ツール

横・縦のオフセット、ぼかし（blur）、色と不透明度を調整して、テキストの影をリアルタイムに確認しながらCSSを作成するツールです。バナー文言やタイトルに立体感を出したいWebデザイナー・制作者が、値を目で合わせてそのままコピーして使うのに向いています。

使い方

1. プレビュー用のテキストと、文字・背景の色を好みに合わせて設定します。
2. オフセットとぼかしのスライダーで、影の位置と柔らかさを調整します。
3. 影の色と不透明度を選び、思いどおりの質感を仕上げます。
4. 生成されたtext-shadowのCSSをコピーして、スタイルに貼り付けます。

よくある質問

オフセットにマイナスの値も指定できますか？

はい。横・縦のオフセットスライダーは-50pxから+50pxまで調整できるので、影を左・上方向にも自由に配置できます。

入力したテキストや色はサーバーに保存されますか？

保存されません。プレビューとCSSの生成はすべてブラウザ内で行われ、どの情報もサーバーに送信・記録されることはありません。

色の不透明度はどう反映されますか？

選んだ影の色と不透明度スライダーの値を合わせてrgba()の形に変換するので、半透明で自然な影までそのままコードに反映されます。