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

2021.01.27
HTML&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 STRIPE GENERATOR

線の幅や角度まで細かく調整できます。作成したストライプはcssやsassのコードが下に表示されます。

CSSチェック柄ジェネレーター

CSSチェック柄ジェネレーター

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

CSSでドット柄

CSSでドット柄

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