CSSだけで水玉背景を作る方法

2022年 9月 8日　Posted　藤原(フロントエンドエンジニア)

今回はCSSだけで水玉背景を作る方法について紹介します。

背景を設定する際、画像で作るのではなくCSSのみで実装すると色や大きさの変更があった場合も柔軟に修正ができます。作業効率も上がります。

radial-gradientで水玉を作る

radial-gradientとは

CSS3で追加されたbackground-imageの値
「radial-gradient」(円形グラデーション)のことです。

＊形は円（circle）・楕円（だえん、ellipse）になります。初期値は楕円です。
＊ background-imageプロパティ・backgroundプロパティに指定することができます。
＊ background-colorプロパティには指定ができません。

設定方法

radial-gradient( )に下記の設定をします。

円の中心から始まる「開始色開始色の範囲」と「終了色終了色の範囲」をコンマ「,」で区切り指定します。
開始色と開始色の範囲、終了色と終了色の範囲の間は半角スペースを入れます。
範囲の値は％やpxで指定ができます。

.dots-bg {
	background-image: radial-gradient(開始色 開始色の範囲, 終了色 終了色の範囲);
}

色の範囲を指定しますと、水玉と背景の境目をくっきり塗り分けたり、グラデーションで滑らかにしたりと、色の範囲の値で調整できます。

作成する背景

今回はこの様な水玉背景を作ります（白地に紺色のドット）。

作り方

まずはじめに大きめの水玉を作ってみます。
円の中心から始まる開始色とその周りに広がる終了色を指定します。

＊水玉と背景の境目把握のため、背景色（終了色）を白からピンク色に変えています。

.dots-bg {
	width:710px;
	height:310px;
	background-image: radial-gradient(#232946 69%, #EEBBC3 70%);
	background-size: 126px 126px;
}

水玉の大きさを小さくします（background-size 126px→18px）。
水玉間の余白を作るため、開始色と終了色の範囲の値を調整します。

.dots-bg {
	width:710px;
	height:310px;
	background-image: radial-gradient(#232946 69%, #EEBBC3 70%);
	background-size: 18px 18px;
}

水玉間に余白ができました。
水玉と背景色との境目が少しギザギザしているので、再度開始色と終了色の範囲の値を調整し、境目を滑らかにします。

.dots-bg {
	width:710px;
	height:310px;
	background-image: radial-gradient(#232946 40%, #EEBBC3 42%);
	background-size: 18px 18px;
}

ギザギザが取れました。
背景色（終了色）を白に戻してみます。

.dots-bg {
	width:710px;
	height:310px;
	background-image: radial-gradient(#232946 30%, #EEBBC3 40%);
	background-size: 18px 18px;
}

同じ様にできました！完成です。

.dots-bg {
	width:710px;
	height:310px;
	background-image: radial-gradient(#232946 30%, #FFFFFF 40%);
	background-size: 18px 18px;
}

いろいろな模様

他にも何かできるかなと思い、少し位置をずらして水玉を増やしてみました。
radial-gradientを複数（2色分）書いています。

＊ background-imageで複数の背景を重ねることができますが、透明色を使わないと重ねて表示したとき一番手前のものしか表示されないため、手前に表示される背景は開始色部分以外は透明色になるように指定します。

.dots-bg {
	width: 223px;
	height: 225px;
	background-image:
	radial-gradient(#232946 30%, transparent 35%),
	radial-gradient(#FF3300 30%, transparent 34%);
	background-size: 50px 50px;
	background-position: 10px 12px, 87px 137px;
}

3色にしてみました。
たくさん重ねるといろいろな模様が作れそうです。

.dots-bg {
	width: 223px;
	height: 225px;
	background-image:
	radial-gradient(#232946 30%, transparent 35%),
	radial-gradient(#FF3300 30%, transparent 34%),
	radial-gradient(#CCC 30%, transparent 35%);
	background-size: 50px 50px;
	background-position: 12px 12px, 87px 137px, 37px 12px;
}

まとめ

水玉だけではなく、楕円形などいろいろな形に変形ができますので、面白い形がたくさん作れそうですね。ぜひいろいろ試してみてはいかがでしょうか？