CSS background cover/fit or similar with radial gradient?-CodePudding

I want a radiant gradient background that is a circular, not ovoid. I want it to scale to the fit the container, which may not be square.

Cover/contain don't treat radial-gradient like a square image, which I suppose makes sense.

Setting background width to 100% operates X and Y independently still.

Setting a fixed px size doesn't allow it to scale to the container.

Are there any pure-CSS ways to make this happen? Maybe a special property value to make the radial gradient act "square" for cover/contain sizing?

.gradier{
  height:200px;
  width: 300px;
  background-image: radial-gradient(rgba(0,255,255, 0.2) 55.5%, rgba(0,255,255,1) 56%, rgba(0,255,255,1) 57%, rgba(0,255,255, 0) 57.5% );
  background-size: 100px 100px;
  background-size: contain;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div ></div>

CodePudding user response：

Use circle closest-side

.gradier {
  height: 200px;
  width: 300px;
  border: 1px solid;
  background: radial-gradient(circle closest-side, rgba(0, 255, 255, 0.2) 96%, rgba(0, 255, 255, 1) 97% 98%, #0000);
}

<div ></div>

Or circle farthest-side

.gradier {
  height: 200px;
  width: 300px;
  border: 1px solid;
  background: radial-gradient(circle farthest-side, rgba(0, 255, 255, 0.2) 96%, rgba(0, 255, 255, 1) 97% 98%, #0000);
}

<div ></div>