radial-gradientで円形のクラデーションを描く際は内接する四角形の大きさを指定する ⭕️

先日、radial-gradientを使ってパキッとした円を描こうと思った際に、円形グラデーションの%の指定が、円に内接する四角形の大きさを指定していることに気づきました。

ソースコード（抜粋）

div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px; height: 80px;
  background: radial-gradient(
    red,
    red 50%,
    blue 50%,
    blue
  );
}

きっかけは、外接する四角形のサイズイメージして、radial-gradientを50%で指定した際に思ったよりも大きな円が描画されたことです。

DEMO

DEMOでは半透明で幅、高さ共に50％の四角形を描いていますが、ぴったり内接していることがわかります。

なので、外接する四角形が50％の円を描画したい場合は√2で割ってあげましょう。（正方形の場合）

ソースコード（抜粋）

div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px; height: 80px;
  background: radial-gradient(
    red,
    red calc(50% / 1.414),
    blue calc(50% / 1.414),
    blue
  );
}

DEMO