CSSのみで背景パターンを実現する方法（7種類サンプル）
画像を使わずにCSSのみで背景パターンを構成する方法を7つのサンプルを使って紹介しています。
ポイントはrepeating-linear-gradient()やlinear-gradient()を複数重ねる事です。
その際重ねる位置をずらしたりtransparentで背景を透明にする事で、様々な模様が構成できます。
CSSのみで背景パターンを実現する
今回は、CSSのみで背景パターンを作る方法をご紹介します。
このテクニックを使えば、背景にパターン画像を用意しなくても様々な模様の背景を付けることができます。
今回は7種類をピックアップし、どのようにして実現しているのかその仕組みをご紹介します。
CSS背景パターン1：ドット柄
サンプル例
背景パターン1（ドット柄）
オーソドックスなドット模様の背景パターンです。
ソース
<div class="bg_pt"></div>
.bg_pt{ background-color: #f3fcfa; background-image: radial-gradient(#1abc9c 1px, #f3fcfa 1px); background-size: 20px 20px; height: 300px; }
作り方
ドットの部分はradial-gradient()で実現しています。
background-image: radial-gradient(#1abc9c 1px, #f3fcfa 1px);
本来radial-gradientは円形グラデーションを掛ける効果がありますが、1pxで設定をする事で「点」を表現しています。
円の大きさと対抗色
前は円形の大きさと色、後ろはグラデーションする対抗色を示しています。今回は1pxなのでグラデーションが全く掛からない事になりますね。
前のpx数を大きくすると、ドット円が大きくなっていきます。
さらに後ろのpx数を大きくして色を変えると、ドット円にグラデーションが掛かる様になります。
ドットの密度を調整するには
background-size: 20px 20px;の部分で、ドットの分布範囲を指定しています。
数字を変更すればその分ドットの間隔が大きく（小さく）なっていきます。
CSS背景パターン2：斜め線
サンプル例
背景パターン2（斜め線）
45度の斜め線が入ったパターンです。使いやすいパターンの一つですね。
ソース
<div class="bg_pt"></div>
.bg_pt{ background-color: #f3fcfa; background-image: repeating-linear-gradient(45deg, #1abc9c 0, #1abc9c 1px, #f3fcfa 0, #f3fcfa 50%); background-size: 20px 20px; height: 300px; }
作り方
斜め線の部分はrepeating-linear-gradient()で実現しています。
background-image: repeating-linear-gradient(45deg, #1abc9c 0, #1abc9c 1px, #f3fcfa 0, #f3fcfa 50%);
角度は-45degとすると反対方向に線が向きます。90degなら垂直の直線になりますね。
斜め線について
最初の「#1abc9c 0, #1abc9c 1px,」部分で1pxの緑の直線を表現しています。px数を上げれば線が太くなります。
グラデーションは「濃い緑色」と「背景色」になるため、結果「濃い緑の直線のみ」が表示されています。
最後の部分は「50%」に設定していないと、斜め線が繰り返される際につながらなくなりますので注意しましょう。
CSS背景パターン3：長方形（正方形）
サンプル例
背景パターン3（長方形）
20px四方の正方形が入ったパターンです。
サンプルは正方形の色が濃いので目立ちますが、背景色に似た色にすればデザイン性が向上するでしょう。
ソース
<div class="bg_pt"></div>
.bg_pt{ background-color: #f3fcfa; background-image: repeating-linear-gradient(45deg, #1abc9c 25%, transparent 25%, transparent 75%, #1abc9c 75%, #1abc9c), repeating-linear-gradient(45deg, #1abc9c 25%, #f3fcfa 25%, #f3fcfa 75%, #1abc9c 75%, #1abc9c); background-position: 0 0, 20px 20px; background-size: 40px 40px; height: 300px; }
作り方
このサンプルも、repating-linear-gradient()を使っています（linear-gradientを使った方法もあります）。
三角形（正方形の斜め半分）を作る
この背景パターンは正方形の背景を繰り返し生成しているのではありません。
40px四方のエリアに対し、45度の斜め線が「右上と左下」部分を通る様に配置します。
枠外の部分は見えないため、線が三角形の形に削れている様に見えています。
20pxずらしてもう一度同じ三角形を構成
さらにrepeating-linear-gradient()をもう1度設定します。
background-position: 0 0, 20px 20px;
上記の部分で2回目の設定が始まる開始位置を20pxずつずらしています。
20pxずらした位置から始める事で、三角形の斜面部分に反転した三角形がくっつく様に配置されます。
それにより四角形（正方形）を構成しているのです。
transparent（透明色）が使われる理由
1回目の三角形を作る際のrepeating-linear-gradient()には、「transparent」による透明色が使われています。
background-image: repeating-linear-gradient(45deg, #1abc9c 25%, transparent 25%, transparent 75%, #1abc9c 75%, #1abc9c), repeating-linear-gradient(45deg, #1abc9c 25%, #f3fcfa 25%, #f3fcfa 75%, #1abc9c 75%, #1abc9c);
両方に背景色が付いていると、20pxずらした三角形の背景が下の三角形を隠してしまいます。
そうなると四角形に見えなくなりますので、片方の背景を透明にしているのです。
正方形のサイズを変えるには
まずは土台となる「background-size」を2倍にする必要があるので、倍の数値に設定しましょう。
サイズを2倍にする場合、2回目の三角形を乗せる際に「background-position」でずらす数値も2倍にします。
小さくする時も同様です。sizeの数値をpositionの倍にしたままで両方の数値を縮小しましょう。
サイズの拡大・縮小
2倍
background-position: 0 0, 40px 40px;（2倍の40pxずらす）
background-size: 80px 80px;（2倍のサイズ）
2分の一
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
CSS背景パターン4：菱形
サンプル例
背景パターン4（菱形）
20px四方の菱型が入ったパターンです。
これも正方形同様に菱形の色を薄くする事で多用できるパターンですが、正方形と違って隙間が少しあります。
ソース
<div class="bg_pt"></div>
.bg_pt{ background-color: #f3fcfa; background-image: linear-gradient(135deg, #1abc9c 25%, transparent 25%), linear-gradient(225deg, #1abc9c 25%, transparent 25%), linear-gradient(45deg, #1abc9c 25%, transparent 25%), linear-gradient(315deg, #1abc9c 25%, #f3fcfa 25%); background-position: 20px 0, 20px 0, 0 0, 0 0; background-size: 20px 20px; background-repeat: repeat; height: 300px; }
作り方
このパターンも正方形と同じく、正方形を敷き詰めている訳ではありません。
正方形の時は「repeating-linear-gradient()」を2回設定していましたが、今回は繰り返しのない「linear-gradient()」を4回使っています。
三角形を4つ作るCSS
background-image: linear-gradient(135deg, #1abc9c 25%, transparent 25%), linear-gradient(225deg, #1abc9c 25%, transparent 25%), linear-gradient(45deg, #1abc9c 25%, transparent 25%), linear-gradient(315deg, #1abc9c 25%, #f3fcfa 25%);
左上・右上・左下・右下の順で、それぞれ角度を変えて三角形を4つ構成しています。
最初の3回はtransparentで背景を透明にし、最後の4回目だけ右下に背景色を設定していますね。
それぞれの開始位置も下の様にずらしています。
background-position: 20px 0, 20px 0, 0 0, 0 0;
これをbackground-repeat: repeat;で繰り返していくと、三角形の辺に別の隣の三角形の辺がくっついている様に見えます。
これが縦方向にも連続する事で三角形4枚が合体し、「菱形」が構成されるという訳です。
菱形のサイズを変えるには
菱形のサイズを2倍にする場合は、まず「background-size」を2倍の数値にします。
同じく「background-position」の数値も2倍にして、三角形の表示位置を広げます。
小さくする時も同様です。sizeの数値をpositionの倍にしたままで両方の数値を縮小しましょう。
サイズの拡大・縮小
2倍
background-position: 40px 0, 40px 0, 0 0, 0 0;
background-size: 40px 40px;
2分の一
background-position: 10px 0, 10px 0, 0 0, 0 0;
background-size: 10px 10px;
CSS背景パターン5：格子状
サンプル例
背景パターン5（格子状）
格子が入ったパターンです。borderではなく縦棒と横棒の連続で構成しています。
ソース
<div class="bg_pt"></div>
.bg_pt{ background-color: #f3fcfa; background-image: linear-gradient(#1abc9c 2px, transparent 2px), linear-gradient(to right, #1abc9c 2px, #f3fcfa 2px); background-size: 40px 40px; height: 300px; }
作り方
40px四方の土台に対し、2pxのラインが引かれた格子を形成しています。
縦ラインと横ラインをそれぞれlinear-gradient()で実現しています。
縦の線と横の線
background-image: linear-gradient(#1abc9c 2px, transparent 2px), linear-gradient(to right, #1abc9c 2px, #f3fcfa 2px);
最初のlinear-gradient()は特に指定がないので上下のグラデーション扱いになります。
ここではtransparentでグラデーションはつきませんから、2pxの横棒直線が伸びます。
次のlinear-gradient()は「to right」としているので、左右（右方向）のグラデーション扱いになります。
緑2pxと背景色2pxでグラデーションした直線が縦に伸びます。
linear-gradient()により上下のグラデーションは「横棒」を表現し、左右のグラデーションは「縦棒」を表現します。グラデーションの方向と直線の方向はそれぞれ逆になっています。
格子サイズを変えるには
サンプルはbackground-size: 40px 40px;であり、40px四方に対して縦と横の線が1本ずつ入る形ですね。
これを半分のbackground-size: 20px 20px;とすれば、格子が細かくなります。
CSS背景パターン6：十字マーク
サンプル例
背景パターン6（十字架）
十字マークが入ったパターンです。プラスのマークが敷き詰められていますね。
ソース
<div class="bg_pt"></div>
.bg_pt{ background-color: #f3fcfa; background: radial-gradient(circle, transparent 20%, #f3fcfa 20%, #f3fcfa 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #f3fcfa 20%, #f3fcfa 80%, transparent 80%, transparent) 50px 50px, linear-gradient(#1abc9c 4px, transparent 4px) 0 -2px, linear-gradient(90deg, #1abc9c 4px, #f3fcfa 4px) -2px 0; background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px; height: 300px; }
作り方
今回は複雑な工程をはさみますが、主な工程は4つです。
background: radial-gradient(circle, transparent 20%, #f3fcfa 20%, #f3fcfa 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #f3fcfa 20%, #f3fcfa 80%, transparent 80%, transparent) 50px 50px, linear-gradient(#1abc9c 4px, transparent 4px) 0 -2px, linear-gradient(90deg, #1abc9c 4px, #f3fcfa 4px) -2px 0; background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
CSSの各段を観察しながら下の解説をご覧ください。
十字マークが入るサークル円を作る
まず1回目のradial-gradient(circle)で大きな穴が空いた円を作ります。
わかりやすい様に背景色とメイン色を反転させています。
このドーナツ型の円は枠外にはみ出しているので、繰り返す事で余白部分が「キラキラ」マークの様になっています。
キラキラマークの上に円が入る様に
次に同じ仕様でもう一度radial-gradient(circle)で円を乗せます。
この時50pxずつずらした位置で開始すると以下の様な模様になります。
わかりやすい様に背景色とメイン色を反転させています。
1回目と2回目で塗られている部分の「差」を（赤色）で示しました。
50pxずらした位置で始めると、キラキラマークの上下左右部分に丁度ドーナツ円が重なっていますよね。
水玉模様を作る
これによりキラキラ部分が隠されて「円」になる訳です。ここまでだけで水玉模様の背景に利用できますよね。
2つのドーナツ円をずらして重ねる事で「水玉」を作るところがポイントです。
十字マークの横棒と縦棒を作る
三番目のlinear-gradient()で、水玉の円の中に横棒をいれます。
わかりやすい様に背景色とメイン色を反転させています。
この後に、最後のlinear-gradient(90deg)で縦棒を入れれば十字マークの完成です。
それぞれに設定されている位置の-2pxは、4pxの太さの棒が円の中心を通る様に調整をしているだけです。
CSS背景パターン7：山形の土台
サンプル例
背景パターン7（山形）
三角の土台を並べた様な立体感のあるパターンです。3Dのブロックを敷き詰めた様な感じですね。
実用的かどうかは別として、このような模様も並べる事ができる例としてご紹介します。
ソース
<div class="bg_pt"></div>
.bg_pt{ background-color: #f3fcfa; opacity: 1.0; background-image: linear-gradient(30deg, #1abc9c 12%, transparent 12.5%, transparent 87%, #1abc9c 87.5%, #1abc9c), linear-gradient(150deg, #1abc9c 12%, transparent 12.5%, transparent 87%, #1abc9c 87.5%, #1abc9c), linear-gradient(30deg, #1abc9c 12%, transparent 12.5%, transparent 87%, #1abc9c 87.5%, #1abc9c), linear-gradient(150deg, #1abc9c 12%, transparent 12.5%, transparent 87%, #1abc9c 87.5%, #1abc9c), linear-gradient(60deg, #1abc9ccc 25%, transparent 25.5%, transparent 75%, #1abc9ccc 75%, #1abc9ccc), linear-gradient(60deg, #1abc9ccc 25%, transparent 25.5%, transparent 75%, #1abc9ccc 75%, #1abc9ccc); background-size: 40px 70px; background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px; height: 300px; }
ご覧の通り非常に複雑なCSSになっています。このサンプルは特に詳細な解説はしません。
各箇所を変更してどのように変化するのかを確かめつつ、自分のものにして頂ければと思います。
色指定の8桁コードについて
よく使う「#」と6桁（16進数）で表示する色指定コード部分が、上記の例では「8桁」になっている部分があります。
これは後ろの2桁部分でアルファ値（透明度）を指定しています。
カラーコードによる透過指定
アルファ値には透明度100％を示す「00」から、透明度0％を表す「FF」まで様々あります。
今回使われている「CC」は透明度20％を表現しています。
少し前まではこの8桁表示はブラウザサポートが進んでおりませんでしたが、現在はGoogle Chromeや新Edgeでも表示されます。
