階段状の影（ステップ・シャドウ）テキストのCSSジェネレーター
テキストの背後に複数の影のレイヤーを等間隔で重ね、レトロポップな厚みのある階段状のエフェクトをCSSのみで生成します。
プレビュー
<div class="step-shadow-text">{{text_content}}</div>.step-shadow-text {
font-family: 'Arial Black', sans-serif;
font-size: 60px;
font-weight: bold;
color: {{text_color}};
text-shadow:
{{sx1}}px {{sy1}}px 0 {{shadow_color_1}},
{{sx2}}px {{sy2}}px 0 {{shadow_color_2}},
{{sx3}}px {{sy3}}px 0 {{shadow_color_3}},
{{sx4}}px {{sy4}}px 0 {{shadow_color_4}},
{{sx5}}px {{sy5}}px 0 {{shadow_color_5}};
}機能、使い方
- グラデーションシャドウ: 最大5段階まで影の色を個別に設定でき、鮮やかなグラデーションや立体感を自由に演出できます。
- 多方向への影: 横方向（X軸）と縦方向（Y軸）のずらし量を独立して調整でき、影の方向を自由自在に操れます。
- リアルタイム生成: パラメータを変更するたびに複雑な
text-shadowプロパティを自動計算し、即座にコードを生成します。
CSSプロパティの説明
text-shadowをカンマ区切りで複数指定することで、多重の影レイヤーを構成しています。
px単位のオフセット値をステップごとに累積計算し、均等な間隔で影を配置しています。
