radial-gradient で円形グラデーションをつくる

背景を円形（放射状）にグラデーション表示させたいときに使えるのが background プロパティの radial-gradient です。

linear-gradient が直線的に色が変化するのに対し、radial-gradient は中心点から外側に向かって色が変化していきます。

円形グラデーションの基本

radial-gradient も linear-gradient と同じく background プロパティに指定します。

background: radial-gradient(#ddd, #333);

background: radial-gradient(#ddd, #333);

radial-gradient(中心の色, 外側に向かう色)

何も指定しない場合、要素の中心を基点に、要素の形に合わせた楕円形のグラデーションになります。

正円・楕円の指定（circle / ellipse）

デフォルトは楕円形（ellipse）ですが、circle を指定すると正円のグラデーションになります。

background: radial-gradient(circle, #ddd, #333);

background: radial-gradient(circle, #ddd, #333);

正方形の要素ではcircleとellipseの差はほぼありませんが、横長のボタンのような要素だとcircleは円のまま、ellipseは要素の形に合わせて潰れます。

正円か楕円かは、ボタンのホバーエフェクトやアイコン装飾など、要素の縦横比に応じて使い分けていきしょう。

グラデーションの中心位置を変える（at）

at を使うと、グラデーションの中心位置を変更できます。水平位置（left / center / right）と垂直位置（top / center / bottom）を半角スペースで区切って指定します。

background: radial-gradient(circle at top right, #ddd, #333);

background: radial-gradient(circle at top right, #ddd, #333);

数値やパーセントでの指定もできます。

background: radial-gradient(circle at 20% 30%, #ddd, #333);

background: radial-gradient(circle at 20% 30%, #ddd, #333);

色の位置をはっきり分割する

linear-gradient と同様に、色の後ろに位置（%）を指定すると、グラデーションではなくはっきりとした境界線をつくることもできます。

background: radial-gradient(circle, green 0%, green 50%, blue 50%, blue 100%);

background: radial-gradient(circle, green 0%, green 50%, blue 50%, blue 100%);

的（まと）のような同心円デザインも、この書き方の応用でつくれます。

background: radial-gradient(circle, red 0%, red 20%, white 20%, white 40%, red 40%, red 60%, white 60%);

background: radial-gradient(circle, red 0%, red 20%, white 20%, white 40%, red 40%, red 60%, white 60%);

複数色のグラデーション

色はカンマ区切りで3色以上指定できます。

background: radial-gradient(circle, aqua, skyblue, blue);

background: radial-gradient(circle, aqua, skyblue, blue);

画像の上にグラデーションを重ねる

画像とグラデーションを重ねて表示することもできます。後に記述したものが下に配置されるため、画像はグラデーションの後ろに書きます。

background: radial-gradient(circle, rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 70%) 100%), url(../images/sampleimg.jpg);

background: radial-gradient(circle, rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 70%) 100%), url(../images/sampleimg.jpg);

中心を透明、外側を暗くすると、写真の四隅を落として被写体を目立たせる「ビネット効果」がつくれます。数値を変えると効果の強さを調整できます。

.vignette_photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-image: radial-gradient(circle, rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 70%) 100%), url(../images/sampleimg.jpg);
  background-size: cover;
  background-position: center;
}

.vignette_photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-image: radial-gradient(circle, rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 70%) 100%), url(../images/sampleimg.jpg);
  background-size: cover;
  background-position: center;
}

40% … 透明のまま保つ範囲。広げるほど暗くなる範囲が狭まる。
70% (不透明度) … 外側の暗さ。100%に近づけるほど四隅が黒く落ちる。

応用：水玉模様をつくる

radial-gradient を小さいサイズで繰り返し表示すると、水玉（ドット）模様の背景がつくれます。

.polka_dot {
  background-image: radial-gradient(circle, #000 30%, transparent 30%);
  background-size: 20px 20px;
}

.polka_dot {
  background-image: radial-gradient(circle, #000 30%, transparent 30%);
  background-size: 20px 20px;
}

点線を作るときにも応用できます。詳しいコード例は「CSSで点線 / 破線の間隔やサイズを自由に調整する方法」でも紹介しています。

参照: