'CSS background cover/fit or similar with radial gradient?

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 class="gradier"></div>
css


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions