【background-image】CSSだけでドット模様を作る方法

RELEASE / 2024.5.5 UPDATE / 2024.05.09

background-image

css

ダイヤ模様

ドット模様

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

デザイナーが作ったデザインに変わった模様の背景があった場合、画像として表示しますよね。
しかし、中には知らなければついつい画像として処理してしまう模様もCSSだけで作ることが出来る背景模様もあります。
この記事では画像を使わず、CSSだけで作ることが出来る背景模様のうち、ドット模様について紹介したいと思います。

この記事の目次を表示

1 ドット模様の作り方
2 CSSで作るドット模様のアレンジ
3 その他模様
4 まとめ

ドット模様の作り方

background-imageプロパティのradial-gradient()で放射グラデーションを作ることでCSSだけでドット模様を作ることが出来ます。
放射グラデーションを作る場合、2色目に指定する色は白（#fff）、または透明（transparent）にする必要があります。

そして、background-sizeプロパティでドットのサイズを指定します。
横と高さのサイズを同じにすることで正円のドット模様を作ることが出来ます。あえて数値を変えて楕円模様を作り出すことも出来ます。

background-positionプロパティでドット模様の配置を指定します。1色のドット模様の場合は指定しなくても問題ありません。

background-imageの使ってドット模様を作るコードはこちら。

background-image: radial-gradient(1色目の色 不透明度, 2色目の色 不透明度);
background-size: ドット模様のサイズ（W）ドット模様のサイズ（H）;
background-position: ドット模様の配置（X軸） ドット模様の配置（Y軸）;

CSSを実際に当てはめたものがこちら。

.dot{
    background-image: radial-gradient(#e8c72e 30%, #fff 30%);
    background-size: 20px 20px;
    background-position: 0ox 0px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

CSSで作るドット模様のアレンジ

ここからはCSSで作るドット模様のアレンジをご紹介します。

大きさを変える

background-sizeプロパティとbackground-imageプロパティの数値を変更することでドット模様の大きさを変えることが出来ます。
background-imageプロパティの数値はドット模様の大きさによって滲みやジャギーが発生します。
滲みやジャギーが不要な場合は、background-sizeプロパティの数値によって微調整して滑らかなドット模様になるように指定を調整します。

数値をを小さくすると小さなドット模様になります。

CSSはこちら。

.dot{
    background-image: radial-gradient(#e8c72e 20%, transparent 20%);
    background-size: 10px 10px;
    background-position: 0px 0px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

数値を大きくすると大きなドット模様になります。

CSSはこちら。

.dot{
    background-image: radial-gradient(#e8c72e 40%, transparent 40%);
    background-size: 30px 30px;
    background-position: 0px 0px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

複数色のドット模様にする

radial-gradient()をコンマで区切り、radial-gradient(),radial-gradient()とすることで複数の色を指定することが出来ます。
その場合、background-size()でそれぞれのドットの大きさを指定し、background-position()で、それぞれのドット模様の配置をずらします。
これで複数の色のドット模様を表示することが出来ます。

CSSはこちら。

.dot{
    background-image: radial-gradient(#e8c72e 30%, transparent 30%),
                      radial-gradient(#3d8582 30%, transparent 30%);
    background-size: 20px 20px,20px 20px;
    background-position: 0px 0px, 10px 10px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ぼかしたドット模様にする

radial-gradient()に指定する2つの%の値の差を大きくすることでぼかしたドット模様にすることが出来ます。

CSSはこちら。

.dot{
    background-image: radial-gradient(#e8c72e 10%, transparent 70%);
    background-size: 20px 20px;
    background-position: 0px 0px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ダイヤ模様にする

ドット模様の大きさを調整することでドット同士が繋がり、空いた隙間でダイヤ模様を作ることが出来ます。

CSSはこちら。

.dot{
    background-image: radial-gradient(#e8c72e 75%, transparent 75%);
    background-size: 30px 30px;
    background-position: 0px 0px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

あらかじめbackground-colorプロパティで背景色を指定しておいて、白いドット模様にすることで背景色をダイヤ模様にすることも出来ます。

CSSはこちら。

.dot{
    background-color: #e8c72e;
    background-image: radial-gradient(#fff 75%, transparent 75%);
    background-size: 30px 30px;
    background-position: 0px 0px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.