先日、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 ); }