如何将此背景创建为 CSS3 径向渐变

Question

我想创建如下图所示的径向背景效果

作为 CSS3 径向渐变。问题是我几分钟前才真正发现径向渐变，而且我对它们的工作原理的理解很差。到目前为止，我的最大努力是

#weather
{
 height:200px;
 width:300px;
 border-radius:8px;
 background-image:radial-gradient(at top left,#667EA3 36%,#556D95 67%);
}

<div id='weather'>&nbsp;</div>

这与我在图片中显示的相去甚远。我怀疑我需要玩 farthest-side 而不是像我所做的那样尝试设置 at top left 但我不太确定我是怎么做到的。

Answer 1

#weather {
  height: 200px;
  width: 300px;
  border-radius: 8px;
  background-image: radial-gradient(at bottom right, #556D95 67%, #667EA3 67%);
}

<div id='weather'>&nbsp;</div>

How can I create this background as a CSS3 radial gradient