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

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

カスタマイズ

プレビュー

CSSコード

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

使用上の注意

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