CSS でドットの背景パターン（水玉模様）を作る方法
公開日
by
CSS でドットの背景パターン（水玉模様）を作る方法を紹介します。
CSS でドットパターンを再現する方法
CSS でドットパターンを再現するには background-image の円形グラデーション radial-gradient を複数指定することで再現します。
交差した複数の円は background をカンマ区切りで複数指定、塗りと透明の境目を調整することではっきりとした円を作り、background-position で 二つの円をずらすことでドットパターンになります。
いくつかの使用パターン（水玉の大きさ違い）を紹介しつつ、調整時の注意点を紹介します。
網点風パターン
この方法で表現できる最小サイズのドットパターン。
グラデーションの円が中央から外に広がるので、4px x 4px のサイズが最小サイズになります。
動画背景の上に、動画の粗さを隠すためにPNGイメージのドットパターンを使用することがよくありますが、この方法を使えば画像を用意することなく CSS のみで対応できるので重宝しそうです。
実際の見た目と CSS の記述は以下の通りです。
.dot1 {
background-color: #fff;
background-image:
radial-gradient(#000 35%, transparent 36%),
radial-gradient(#000 35%, transparent 36%);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
}
実際に写真や動画の上に乗せるときは、透過の背景色を追加すると効果的です。
...省略...
background-color: rgba(0,0,0,.2);
...省略...
テクスチャードットパターン（S）
最小サイズよりもひとまわり大きいドットパターン。
このサイズ感であれば、背景色とドット色のトーンを近づけてテクスチャー的に使うことができます。
実際の見た目と CSS の記述は以下の通りです。
.dot2 {
background-color: #fff;
background-image:
radial-gradient(#ccc 30%, transparent 33%),
radial-gradient(#ccc 30%, transparent 33%);
background-size: 8px 8px;
background-position: 0 0, 4px 4px;
}
コミック風ドットパターン（M）
ドットのサイズが十分視認できるサイズなので、コミック風やポップなサイトのアクセントに重宝しそうなサイズ感です。
実際の見た目と CSS の記述は以下の通りです。
.dot3 {
background-color: #fff;
background-image:
radial-gradient(#333 28%, transparent 35%),
radial-gradient(#333 28%, transparent 35%);
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
}
パステルカラーの水玉模様1（L）
水玉を大きく、パステルカラーを使うことでファンシーなアクセントとして使用できます。
実際の見た目と CSS の記述は以下の通りです。
.dot4 {
background-color: #f6f5ff;
background-image:
radial-gradient(#fff 28%, transparent 33%),
radial-gradient(#fff 28%, transparent 33%);
background-size: 32px 32px;
background-position: 0 0, 16px 16px;
}
水玉の境界をパキッと見せたい場合は、塗りと透明の境目の値を近づけて調整をしてください。
パステルカラーの水玉模様2（XL）
先ほど紹介したサイズからさらに水玉を大きく、淡い色でまとめて可愛らしさを強調します。
実際の見た目と CSS の記述は以下の通りです。
.dot5 {
background-color: #dff3fe;
background-image:
radial-gradient(#ccedff 28%, transparent 31%),
radial-gradient(#ccedff 28%, transparent 31%);
background-size: 64px 64px;
background-position: 0 0, 32px 32px;
}
こちらも、水玉の境界をパキッと見せたい場合は、塗りと透明の境目の値を近づけて調整をしてください。
まとめ
CSS でドットパターン（水玉模様）を作る方法を紹介しました。
