CSSでストライプなどの背景パターンを作る方法

CSSによるグラデーションの色の位置を指定できる性質を応用することで、ストライプのような幾何学模様を作成することができます。ストライプ、チェック柄、ドットなど定番の柄の作り方をまとめました。
ストライプ
CSSのrepeating-linear-gradient()
を利用してストライプを作成します。repeating-linear-gradient()
は、反復線形グラデーションを生成できる関数です。
SAMPLE
body{
background: repeating-linear-gradient(#c2a8cc, #c2a8cc 20px, #fff 20px, #fff 40px);
}
サンプルでは、「#c2a8cc(紫色)」と「#fff(白色)」の横方向のストライプを作成しました。0〜20pxを「#c2a8cc」、20〜40pxを「#fff」と設定し、これがループされることで、20px間隔のストライプが作成できます。この、色の間の値を変更することで、ストライプの線の幅を調整することができます。
SAMPLE
body{
background: repeating-linear-gradient(#c2a8cc, #c2a8cc 10px, #fff 10px, #fff 60px);
}
0〜10pxを「#c2a8cc」、10〜60pxを「#fff」としたサンプルです。「#c2a8cc」の幅が10pxと狭くなり、「#fff」が広くなりました。
縦ストライプ
縦方向のストライプにしたい場合は、角度を追加します。
SAMPLE
body{
background: repeating-linear-gradient(90deg, #c2a8cc, #c2a8cc 20px, #fff 20px, #fff 40px);
}
色の設定の前に「90deg」を追加しました。柄が「90度」回転することで、縦方向のストライプになりました。
斜めストライプ
斜めに傾いたストライプにしたい場合も角度を調整します。
SAMPLE
body{
background: repeating-linear-gradient(135deg, #c2a8cc, #c2a8cc 20px, #fff 20px, #fff 40px);
}
「135deg」と設定することで斜めになりました。
市松模様
CSSのlinear-gradient()
を利用して市松模様を作成します。
SAMPLE
body{
background-color: #fff;
background-image: linear-gradient(45deg, #c2a8cc 25%, transparent 25%, transparent 75%, #c2a8cc 75%),
linear-gradient(45deg, #c2a8cc 25%, transparent 25%, transparent 75%, #c2a8cc 75%);
background-size: 80px 80px;
background-position: 0 0, 40px 40px;
}
linear-gradient
を2つ「,(カンマ)」でつなぐことで背景を2つ設定しています。background-position
で2つ目の背景の位置をずらすことで、市松模様を作成しています。
linear-gradient
の値に「transparent(透明)」を設定することで、それぞれの背景の「#c2a8cc」の三角形が組み合わさることによって模様になっています。
チェック柄
CSSのlinear-gradient()
を利用してチェック柄(ギンガムチェック)を作成します。
SAMPLE
body{
background-color: #fff;
background-image: linear-gradient(90deg, rgba(194, 168, 204, .5) 50%, transparent 50%),
linear-gradient(rgba(194, 168, 204, .5) 50%, transparent 50%);
background-size: 80px 80px;
}
背景色を透過させた2つの背景を交差させています。色を透過するために「rgba(194, 168, 204, .5)」のRGBカラーの表記を使用しています。「19, 195, 172」の値で「#c2a8cc」と同じ色を指定し、「.5」で「透過(50%)」を設定しています。
斜めのチェック柄
チェック柄を斜めにしたい場合は、repeating-linear-gradient()
を使用します。
SAMPLE
body{
background-color: #fff;
background-image: repeating-linear-gradient(45deg,
rgba(194, 168, 204, 0.50),
rgba(194, 168, 204, 0.50) 40px,
transparent 0,
transparent 80px),
repeating-linear-gradient(315deg,
rgba(194, 168, 204, 0.50),
rgba(194, 168, 204, 0.50) 40px,
transparent 0,
transparent 80px);
}
上のサンプルと同様に、ストライプの背景を2つ作り斜めに交差させています。色の設定の数が大いため、コードが若干長くなってしまいますが、角度を指定したい場合は、linear-gradient()
を使う方法よりも便利です。
ウィンドペン
チェックの線を透過させずに細く引くと、方眼紙のようなチェック柄、ウィンドペンも作れます。
SAMPLE
body{
background-color: #c2a8cc;
background-image: linear-gradient(#fff 1px, transparent 0),
linear-gradient(90deg, #fff 1px, transparent 0);
background-size: 40px 40px;
}
ドット(水玉模様)
チェック柄を斜めにしたい場合は、radial-gradient()
を使用します。
SAMPLE
body{
background-color: #fff;
background-image: radial-gradient(#c2a8cc 30%, transparent 33%),
radial-gradient(#c2a8cc 30%, transparent 33%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
60px四方のエリアの「30%」の大きさの円を作成し、background-position
でずらして並べています。「transparent」の値を「33%」にすることで、角ばらず綺麗な円になるように調整しています。
background-size
の値を大きくすると円が大きくなります。それに伴い、background-position
の値や、「transparent」の値を調整します。
SAMPLE
body{
background-image: radial-gradient(#c2a8cc 30%, transparent 31%),
radial-gradient(#c2a8cc 30%, transparent 31%);
background-size: 100px 100px;
background-position: 0 0, 50px 50px;
}
便利なジェネレーター
ストライプやドット柄のCSSを簡単に精製できるジェネレーターです。
CSS STRIPE GENERATOR

線の幅や角度まで細かく調整できます。作成したストライプはcssやsassのコードが下に表示されます。
CSSチェック柄ジェネレーター

2色のチェック柄を作成できるジェネレーターです。サンプルタイプからチェックのスタイルを選んで作成できます。
CSSでドット柄

ドットのサイズや間隔まで細かく調整できます。作成したドットはcssのコードが下に表示されます。