テキストシャドウのプレビュー
50px
0px
シャドウ #1
4px
4px
0px
CSS 出力
テキストシャドウジェネレーターの使い方
1. プレビュー背景の設定
最初に、テキストシャドウの効果を確認しやすいように、プレビュー領域の背景を設定します。
- 「明るめ」ボタンで白系の背景色を選択（デフォルト）
- 「暗め」ボタンで暗い背景色に切り替え
- 「色指定」ボタンでカスタム背景色を選択可能
2. テキスト設定のカスタマイズ
テキストの基本的な外観を調整します。シャドウ効果を適用するテキストの見た目を整えましょう。
- テキスト入力：表示するテキストを入力フィールドに記入
- フォント：日本語フォントから選択可能
- フォントサイズ：スライダーで12〜100pxの範囲で調整
- フォントウェイト：Light(300)からBlack(900)まで太さを選択
- フォントスタイル：通常(Normal)や斜体(Italic)を選択
- 文字間隔：letter-spacingの値を-5〜10pxの範囲で調整
- テキスト色：カラーピッカーでテキストの色を自由に設定
3. シャドウ効果の作成
テキストシャドウの見た目を詳細に調整します。複数のシャドウを重ねることで、より複雑な効果を生み出せます。
- 水平位置：影の横方向の位置を調整（-50〜50pxの範囲）
- 垂直位置：影の縦方向の位置を調整（-50〜50pxの範囲）
- ぼかし：影のぼかし効果の強さを調整（0〜20pxの範囲）
- 色：影の色をカラーピッカーで自由に設定
- 「新しいシャドウを追加」ボタンで複数のシャドウを重ねて複雑な効果を作成可能
- 不要なシャドウは「このシャドウを削除」ボタンで削除可能
4. CSS出力の取得
作成したテキストシャドウのCSSコードを取得して、WEBサイトに実装します。
- 「完全なCSS」タブ：テキストとシャドウの完全なCSSコードを表示
- 「text-shadowのみ」タブ：text-shadowプロパティのみを表示
- 各タブの下部にある「コピー」ボタンでクリップボードにコードをコピー
- コピーしたコードはWEBサイト等ののCSSファイルに貼り付けるだけですぐに適用できます
