水玉模様のデザインサンプル
これからご紹介するサンプルコードでは、便宜上、<div>に対して水玉模様を適用しています。また、模様の設定に絞って記述しています（<p>タグについては、配色の観点から、色についてのみ記述しています）。
これらの設定を、ボックスの背景としてそのまま使う事もできますが、ボックスそのものの設定については省略している点にご注意ください。
ご自身のサイトなどで、当サイトのサンプルコードをそのまま公開したり、配布したりするのはご遠慮ください。それらの行為は禁止とさせて頂きます。
（変更してあったとしても、それがごく一部に限られているような状態であれば同様です）
ライラック x 白 x 縦横
円形（または点々）が縦と横に並んでいるタイプの水玉模様です。
縦横の水玉
ライラック色の背景の中心から白い円形が繰り返し描かれる、水玉模様の背景デザインです。玉の大きさは8px（主要なブラウザにデフォルトで設定されているフォントサイズの半分）です。[Demo]
コードを表示する
<div class="polka-dots10">
<p>縦横の水玉</p>
</div>
.polka-dots10{
background:radial-gradient(
#fffeff 4px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 5px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 32px 32px, /*玉の位置（中央配置）／玉の描画範囲*/
#e7c7fe; /*背景の色*/
}
.polka-dots10 p{
color: #2e2833; /*文字の色*/
}
縦横の水玉
（間隔広め）
マゼンタ系の白い背景の中心から、ライラック色の水玉が繰り返し描かれる背景デザインです。玉の大きさは、1つ前のデザインと同じ8pxですが、玉同士の間隔を広めに取ってみました。[Demo]
コードを表示する
<div class="polka-dots11">
<p>縦横の水玉（間隔広め）</p>
</div>
.polka-dots11{
background:radial-gradient(
#e7c7fe 4px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 5px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 36px 36px, /*玉の位置（中央配置）／玉の描画範囲*/
#fffeff; /*背景の色*/
background-repeat: space; /*玉の繰り返し方の設定*/
/*space：玉が要素の端で切り取られないように、間隔が調整される*/
}
.polka-dots11 p{
color: #333333; /*文字の色*/
}
大きい水玉
水玉を大きくしてみました。玉の大きさは「縦横の水玉」の2倍（16px）です。「上のサンプルを見るだけでは、大きな要素に適用した場合のイメージが湧いて来ない」という方は、こちらのデモページをご覧ください→[Demo]
コードを表示する
<div class="polka-dots12">
<p>大きい水玉</p>
</div>
.polka-dots12{
background:radial-gradient(
#fffeff 8px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 9px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 32px 32px, /*玉の位置（中央配置）／玉の描画範囲*/
#e7c7fe; /*背景の色*/
}
.polka-dots12 p{
color: #2e2833; /*文字の色*/
}
大きい水玉
（間隔広め）
水玉を大きくした上で、間隔も開けてみました。こちらの玉の大きさも、16pxです。サイトの背景に使うなど、大きな要素に適用した場合、玉同士の間隔に違いがあっても分かりにくくなるようです→[Demo]
コードを表示する
<div class="polka-dots13">
<p>大きい水玉（間隔広め）</p>
</div>
.polka-dots13{
background:radial-gradient(
#e7c7fe 8px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 9px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 36px 36px, /*玉の位置（中央配置）／玉の描画範囲*/
#fffeff; /*背景の色*/
background-repeat: space; /*玉の繰り返し方の設定*/
/*space：玉が要素の端で切り取られないように、間隔が調整される*/
}
.polka-dots13 p{
color: #333333; /*文字の色*/
}
もっと大きい水玉
（ダイヤ柄風）
水玉と水玉がくっつくくらいに大きくしてみました。こうすると、玉同士の隙間から見えている色（背景色）が、ダイヤの形をしているような柄になります。ちなみに、玉の大きさは普通の水玉の４倍相当です。[Demo]
コードを表示する
<div class="polka-dots14">
<p>もっと大きい水玉（ダイヤ柄風）</p>
</div>
.polka-dots14{
background:radial-gradient(
#fffeff 16px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 17px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 32px 32px, /*玉の位置（中央配置）／玉の描画範囲*/
#e7c7fe; /*背景の色*/
}
.polka-dots14 p{
color: #2e2833; /*文字の色*/
}
もっと大きい水玉
（ダイヤも大きめ）
こちらも玉同士がくっつくように水玉の直径を広げましたので、他よりもだいぶ大きな水玉模様（ダイヤ模様？）になりました。玉の大きさは、40pxです。その分、ダイヤのような隙間も大きくなっています。[Demo]
コードを表示する
<div class="polka-dots15">
<p>もっと大きい水玉（ダイヤも大きめ）</p>
</div>
.polka-dots15{
background:radial-gradient(
#e7c7fe 20px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 21px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 40px 40px, /*玉の位置（中央配置）／玉の描画範囲*/
#fffeff; /*背景の色*/
}
.polka-dots15 p{
color: #333333; /*文字の色*/
}
小さい水玉
今度は玉を小さくしてみました。大きさは最初の水玉の半分の、4pxです。ここまで小さいと、水玉（円形）というより、点々（ドット）と呼んだ方が良さそうな雰囲気ですね。[Demo]
コードを表示する
<div class="polka-dots16">
<p>小さい水玉</p>
</div>
.polka-dots16{
background:radial-gradient(
#fffeff 2px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 3px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 30px 30px, /*玉の位置（中央配置）／玉の描画範囲*/
#e7c7fe; /*背景の色*/
}
.polka-dots16 p{
color: #2e2833; /*文字の色*/
}
小さい水玉
（間隔広め）
背景の色を白系にすると、ドット方眼タイプのノートやルーズリーフのような柄になりますね。点々の色もグレーなどに変えると、より近い雰囲気の物になるかもしれません。[Demo]
コードを表示する
<div class="polka-dots17">
<p>小さい水玉（間隔広め）</p>
</div>
.polka-dots17{
background:radial-gradient(
#e7c7fe 2px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 3px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 34px 34px, /*玉の位置（中央配置）／玉の描画範囲*/
#fffeff; /*背景の色*/
background-repeat: space; /*玉の繰り返し方の設定*/
/*space：玉が要素の端で切り取られないように、間隔が調整される*/
}
.polka-dots17 p{
color: #333333; /*文字の色*/
}
小さい2色の水玉
（白と緑）
緑色の玉を加えて、水玉の色を2色にしてみました。コードとしては玉4つ分の指定が必要になるのですが、見た目が賑やかになったり華やいだりするので、やりがいはあると思います。[Demo]
コードを表示する
<div class="polka-dots18">
<p>小さい2色の水玉（白と緑）</p>
</div>
.polka-dots18{
background:
radial-gradient(#fffeff 2px, transparent 3px) center / 60px 60px, /*要素の中央にある、白い玉*/
radial-gradient(#c8f5cb 2px, transparent 3px) calc(50% + 30px) 50% / 60px 60px, /*中央の白い玉から見て、1つ右の玉（緑色）*/
radial-gradient(#fffeff 2px, transparent 3px) calc(50% + 30px) calc(50% + 30px) / 60px 60px, /*中央の白い玉から見て、右下の玉（白）*/
radial-gradient(#c8f5cb 2px, transparent 3px) 50% calc(50% + 30px) / 60px 60px, /*中央の白い玉から見て、1つ下の玉（緑色）*/
#e7c7fe; /*背景の色*/
}
.polka-dots18 p{
color: #2e2833; /*文字の色*/
}
小さい2色の水玉
（緑とライラック）
背景色を指定した上で水玉にも色がついていると、色味が多くて扱いにくい、と感じる場合もあると思います。そのような時には、玉の方にだけ色味を指定すれば、扱いやすくなると思います。[Demo]
コードを表示する
<div class="polka-dots19">
<p>小さい2色の水玉（緑とライラック）</p>
</div>
.polka-dots19{
background:
radial-gradient(#c8f5cb 2px, transparent 3px) center / 60px 60px, /*要素の中央にある、緑色の玉*/
radial-gradient(#e7c7fe 2px, transparent 3px) calc(50% + 30px) 50% / 60px 60px, /*中央の緑の玉から見て、1つ右の玉（ライラック）*/
radial-gradient(#c8f5cb 2px, transparent 3px) calc(50% + 30px) calc(50% + 30px) / 60px 60px, /*中央の緑の玉から見て、右下の玉（緑）*/
radial-gradient(#e7c7fe 2px, transparent 3px) 50% calc(50% + 30px) / 60px 60px, /*中央の緑の玉から見て、1つ下の玉（ライラック）*/
#fffeff; /*背景の色*/
}
.polka-dots19 p{
color: #333333; /*文字の色*/
}
パステルピンク x 白 x 斜め
円形（または点々）が斜めに並んだ水玉模様です。布地などの柄として、ある意味では馴染みのある水玉模様ではないでしょうか。
斜めの水玉
白い玉が斜めに並んでいるように見える水玉模様です。背景の色はパステルピンク、玉の大きさは8pxです。[Demo]
コードを表示する
<div class="polka-dots20">
<p>斜めの水玉</p>
</div>
.polka-dots20{
background:
radial-gradient(/*1つ目の水玉に関する設定*/
#fffeff 4px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 5px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 40px 40px, /*玉の位置（中央配置）／玉の描画範囲*/
radial-gradient(/*2つ目の水玉に関する設定*/
#fffeff 4px,
transparent 5px)
calc(50% + 20px) calc(50% + 20px) / 40px 40px,
/*玉の位置：1つ目の玉から見て右に20px、下に20px／玉の描画範囲*/
#fed2dc; /*背景の色*/
}
.polka-dots20 p{
color: #33282a; /*文字の色*/
}
斜めの水玉
（間隔広め）
マゼンタ系の白い背景色と、ピンク系の玉による水玉模様です。玉の大きさは同じく8pxですが、玉同士の間隔を少し広くしました。[Demo]
コードを表示する
<div class="polka-dots21">
<p>斜めの水玉（間隔広め）</p>
</div>
.polka-dots21{
background:
radial-gradient(/*1つ目の水玉に関する設定*/
#fecdd7 4px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 5px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 48px 48px, /*玉の位置（中央配置）／玉の描画範囲*/
radial-gradient(/*2つ目の水玉に関する設定*/
#fecdd7 4px,
transparent 5px)
calc(50% + 24px) calc(50% + 24px) / 48px 48px,
/*玉の位置：1つ目の玉から見て右に20px、下に20px／玉の描画範囲*/
#fffeff; /*背景の色*/
}
.polka-dots21 p{
color: #333333; /*文字の色*/
}
2色の水玉
（白と緑）
緑の玉を加えて、水玉の色を2色にしてみました。白い玉が要素（背景）の中央に来るようになっており、その右下が、緑色の玉の始まりの位置となっています。[Demo]
コードを表示する
<div class="polka-dots22">
<p>2色の水玉（白と緑）</p>
</div>
.polka-dots22{
background:
radial-gradient(/*1つ目の水玉に関する設定*/
#fffeff 4px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 5px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 40px 40px, /*玉の位置（中央配置）／玉の描画範囲*/
radial-gradient(/*2つ目の水玉に関する設定*/
#d2fede 4px,
transparent 5px)
calc(50% + 20px) calc(50% + 20px) / 40px 40px,
/*玉の位置：1つ目の玉から見て右に20px、下に20px／玉の描画範囲*/
#fed2dc; /*背景の色*/
}
.polka-dots22 p{
color: #33282a; /*文字の色*/
}
2色の水玉
（ピンクと緑）
こちらの水玉は、ピンク系と緑系の2色です。背景の色が白っぽいと、複数色の玉でも見やすいように感じますね。要素の中央に来るのは、ピンク系の玉となっています。[Demo]
コードを表示する
<div class="polka-dots23">
<p>2色の水玉（ピンクと緑）</p>
</div>
.polka-dots23{
background:
radial-gradient(/*1つ目の水玉に関する設定*/
#fecdd7 4px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 5px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 48px 48px, /*玉の位置（中央配置）／玉の描画範囲*/
radial-gradient(/*2つ目の水玉に関する設定*/
#cdfedc 4px,
transparent 5px)
calc(50% + 24px) calc(50% + 24px) / 48px 48px,
/*玉の位置：1つ目の玉から見て右に20px、下に20px／玉の描画範囲*/
#fffeff; /*背景の色*/
}
.polka-dots23 p{
color: #333333; /*文字の色*/
}
大小の水玉
（中央に小さい玉）
大きい水玉と小さい水玉、サイズの違う水玉を組み合わせてみました。小さい方が8px、大きい方が16pxです。[Demo]
コードを表示する
<div class="polka-dots24">
<p>大小の水玉（中央に小さい玉）</p>
</div>
.polka-dots24{
background:
radial-gradient(/*1つ目の水玉に関する設定*/
#fffeff 4px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 5px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 48px 48px, /*玉の位置（中央配置）／玉の描画範囲*/
radial-gradient(/*2つ目の水玉に関する設定*/
#fffeff 8px,
transparent 9px)
calc(50% + 24px) calc(50% + 24px) / 48px 48px,
/*玉の位置：1つ目の玉から見て右に20px、下に20px／玉の描画範囲*/
#fed2dc; /*背景の色*/
}
.polka-dots24 p{
color: #33282a; /*文字の色*/
}
大小の水玉
（中央に大きい玉）
大きい玉が背景の中央に来るようにしてみました。玉の大きさは1つ前と同じですが、玉同士の間隔を広くしてあります。[Demo]
コードを表示する
<div class="polka-dots25">
<p>大小の水玉（中央に大きい玉）</p>
</div>
.polka-dots25{
background:
radial-gradient(/*1つ目の水玉に関する設定*/
#fecdd7 8px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 9px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 56px 56px, /*玉の位置（中央配置）／玉の描画範囲*/
radial-gradient(/*2つ目の水玉に関する設定*/
#fecdd7 4px,
transparent 5px)
calc(50% + 28px) calc(50% + 28px) / 56px 56px,
/*玉の位置：1つ目の玉から見て右に20px、下に20px／玉の描画範囲*/
#fffeff; /*背景の色*/
}
.polka-dots25 p{
color: #333333; /*文字の色*/
}
大きな水玉
大きい水玉だけにしてみました。玉の大きさは「斜めの水玉」の３倍（24px）です。窮屈だなと感じる場合には、玉の描画範囲の値を48pxより大きな数値に変えてみて下さい。[Demo]
コードを表示する
<div class="polka-dots26">
<p>大きな水玉</p>
</div>
.polka-dots26{
background:
radial-gradient(/*1つ目の水玉に関する設定*/
#fffeff 12px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 13px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 48px 48px, /*玉の位置（中央配置）／玉の描画範囲*/
radial-gradient(/*2つ目の水玉に関する設定*/
#fffeff 12px,
transparent 13px)
calc(50% + 24px) calc(50% + 24px) / 48px 48px,
/*玉の位置：1つ目の玉から見て24px、下に24px／玉の描画範囲*/
#fed2dc; /*背景の色*/
}
.polka-dots26 p{
color: #33282a; /*文字の色*/
}
もっと大きな水玉
水玉をさらに大きくしました。玉の大きさは「斜めの水玉」の4倍（32px）です。玉が大きくなるにつれ、可愛さよりもインパクトの方が強くなって来るように思います。[Demo]
コードを表示する
<div class="polka-dots27">
<p>もっと大きな水玉</p>
</div>
.polka-dots27{
background:
radial-gradient(/*1つ目の水玉に関する設定*/
#fecdd7 16px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 17px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 64px 64px, /*玉の位置（中央配置）／玉の描画範囲*/
radial-gradient(/*2つ目の水玉に関する設定*/
#fecdd7 16px,
transparent 17px)
calc(50% + 32px) calc(50% + 32px) / 64px 64px,
/*玉の位置：1つ目の玉から見て右に32px、下に32px／玉の描画範囲*/
#fffeff; /*背景の色*/
}
.polka-dots27 p{
color: #333333; /*文字の色*/
}
小さな水玉
斜めに並ぶ大きな水玉を作ったので、小さな水玉も作りました。玉の大きさは「斜めの水玉」の半分にあたる、4pxです。このくらいの水玉柄は、背景として使っても目立ちすぎないので、良いのではないかと思います。[Demo]
コードを表示する
<div class="polka-dots28">
<p>小さな水玉</p>
</div>
.polka-dots28{
background:
radial-gradient(/*1つ目の水玉に関する設定*/
#fffeff 2px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 3px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 40px 40px, /*玉の位置（中央配置）／玉の描画範囲*/
radial-gradient(/*2つ目の水玉に関する設定*/
#fffeff 2px,
transparent 3px)
calc(50% + 20px) calc(50% + 20px) / 40px 40px,/*玉の位置：1つ目の玉から見て右に20px、下に20px／玉の描画範囲*/
#fed2dc; /*背景の色*/
}
.polka-dots28 p{
color: #33282a; /*文字の色*/
}
もっと小さな水玉
最後に、さらに小さい水玉模様を作りました。こちらの玉の直径は、2pxです。玉の小ささに合わせて、玉の描画範囲を30px四方にしました。背景の柄として使うにしても、これは流石に小さ過ぎるかもしれません。[Demo]
コードを表示する
<div class="polka-dots29">
<p>もっと小さな水玉</p>
</div>
.polka-dots29{
background:
radial-gradient(/*1つ目の水玉に関する設定*/
#fecdd7 1px, /*玉の色と、玉の縁の位置（玉の半径に相当）*/
transparent 2px) /*玉の周りの色（透明）と、透明色の開始位置*/
center / 30px 30px, /*玉の位置（中央配置）／玉の描画範囲*/
radial-gradient(/*2つ目の水玉に関する設定*/
#fecdd7 1px,
transparent 2px)
calc(50% + 15px) calc(50% + 15px) / 30px 30px,/*玉の位置：1つ目の玉から見て右に15px、下に15px／玉の描画範囲*/
#fffeff; /*背景の色*/
}
.polka-dots29 p{
color: #333333; /*文字の色*/
}