首先，可以像下面这样简化渐变.

To start with, your gradient can be simplified like below.

.box{
 background: 
  radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), transparent), 
  radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), transparent 300px);
 height:200px;
}

body {
 background:blue;
}

<div class="box">

</div>

现在的问题是，Safari浏览器不支持at所使用的语法，正如您在

Now the issue is that safari don't support the syntax used with at as you can see in the MDN page:

您可以像下面那样更改语法.我将拆分渐变以更好地查看结果，然后可以轻松地将它们组合起来.

You can change your syntax like below. I will split the gradient to better see the result, then you can easily combine them.

第一个渐变:

.box{
 background: 
  radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), red);
 height:200px;
}

.box2{
 background: 
  radial-gradient( farthest-side, rgba(218, 218, 216, 0.5), red) top right/200% 200%;
 height:200px;
}

<div class="box">

</div>
<div class="box2">

</div>

第二个梯度

.box{
 background:  
  radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), red 300px);
 height:200px;
}

.box2{
 background:  
  radial-gradient( farthest-corner, rgba(253, 253, 253, 0.5), red 300px) top left/200% 200%;
 height:200px;
}

<div class="box">

</div>
<div class="box2">

</div>

诀窍在于，如果删除at，则默认情况下，渐变将从中心开始，而从中心开始时，我们需要X距离才能到达拐角处或侧面，这与从一个角时，我们将需要X距离的两倍.这就是为什么我将渐变大小设置为200% 200%的原因，并且我只是将背景位置调整为具有相同的视觉效果.

The trick is that if you remove the at, the gradient will by default start from the center and when starting from the center we need an X distance to reach either the corner or the sides unlike when we start from a corner when we will need twice the X distance. That's why I made the gradient to have a size of 200% 200% and the I simply adjust the background position to have the same visual.

这是最后的背景:

.box{
 background: 
  radial-gradient( farthest-side, rgba(218, 218, 216, 0.5) , transparent) top right/200% 200%, 
  radial-gradient( farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px) top left/200% 200%;
 height:200px;
}

body {
 background:blue;
}

<div class="box">

</div>

相关问题:如何使用CSS为径向渐变设置动画?