ストライプ柄CSSジェネレーター

ストライプ柄（縞模様）のBackgroundを作成するためのCSSコードを生成します。
ストライプの角度や幅、色、間隔を自由にカスタマイズ可能です。
出力されるCSSコードをコピペで簡単に使えます。

豊富なデザインテンプレートから好きなものを選択してカスタマイズ可能です。
（※現在のカスタマイズ状況はリセットされます。）

カスタマイズ

プレビュー

CSSコード

.stripe {
  background-image: repeating-linear-gradient(45deg, #06b6d4, #06b6d4 10px, transparent 10px, transparent 20px);
}

使用上の注意

モダンブラウザでの使用を想定しており、IEや古いバージョンのブラウザではサポートされていないCSSプロパティを含む場合があります。
当サイトのリセットCSSは「modern-normalize.css」をベースにしています。ご自身のプロジェクトで利用するリセットCSSやその他のCSSによって、プレビューの見た目と差異が生じる場合があります。