Stripe Background Generator
Preview
CSS Code
このジェネレーターを使えば、CSSだけで背景にストライプ柄を簡単に作成できます！横線・縦線・斜め線を選択し、線の太さ・間隔・色・角度 などをカスタマイズできるので、好みのデザインを簡単に設定できます。
ストライプ柄ジェネレーターとは？
CSSの linear-gradient() を活用して、背景に繰り返し適用できるストライプ柄を生成 するツールです。
通常、ストライプ柄の作成には CSSの背景グラデーション を手動で調整する必要がありますが、このジェネレーターを使えば、直感的に設定してCSSコードをコピーするだけ！
使い方
1. ストライプの方向を選ぶ
「ストライプの方向」をラジオボタンで選択すると、プレビューが即座に更新されます。
- 縦ストライプ（90°）
- 横ストライプ（0°）
- 斜めストライプ（45° / -45°）
2. 線の太さと間隔を調整
スライダーで 線の太さ と 線の間隔 を調整できます。
- 線の太さ (px) … ストライプの線の太さを調整
- 線の間隔 (px) … ストライプ同士の間隔を調整
間隔を狭くすると、密度の高いストライプ柄が作れます。
3. 色を設定
カラーピッカーで ストライプの色 と 背景色 を自由に設定できます。白黒のモノトーンや、カラフルなデザインにも対応できます。
4. 角度を調整
スライダーを動かして ストライプの角度（°） を変更できます。
- 0°（横）
- 90°（縦）
- 斜め（45°・-45° など）
リアルタイムでプレビューを確認しながら、好みの角度に調整できます。
5. CSSコードをコピー
調整が完了したら、「CSSコードをコピー」ボタンをクリック すれば、生成されたCSSコードを簡単に取得できます！
そのまま WebサイトのCSSに貼り付けるだけでOK です。
