如何淡出渐变圆的边缘

Question

我正在尝试实现这种渐变效果gradient fade out effect。如果我的 cricles 周围没有那些线条，我会对我的代码感到满意。如何使它们淡出以产生漂亮的渐变 shine/glow 效果？我只想摆脱那些周围的线条。（在整页观看代码截图）

.box {
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
  background: -webkit-radial-gradient( white, transparent 75%);
  opacity: 1;
  position: absolute;
  top:-1000px;
  left:-500px;
  opacity: 0.7;
}
.box2 {
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
  background: -webkit-radial-gradient( orange, transparent 75%);
  opacity: 1;
  position: absolute;
  top:-800px;
  right:-800px;
  opacity: 0.5;
}
body {
  background: darkblue;
  overflow: hidden;
  padding:0;
  margin:0;
}
.container {
  max-width: 1600px;
  overflow: hidden;
  position: relative;
  height: 100vh;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css.css">
    <title></title>
  </head>
  <body>
  <div class="container">
    <div class="box">

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

    </div>
  </div>


  </body>
</html>

Answer 1

您看到的圆圈来自不透明度和 border-radius 的组合。我相信您的预期结果更接近删除 border-radius.

此外，（但这是主观的）可能 "white" 透明比默认的 "black" 透明更好。当然，transparent 不关心颜色，但是 transition 关心，而且颜色更深。

.box {
  width: 2000px;
  height: 2000px;
  background: radial-gradient( white, rgba(255, 255, 255, 0) 75%);
  opacity: 1;
  position: absolute;
  top:-1000px;
  left:-500px;
  opacity: 0.7;
}
.box2 {
  width: 2000px;
  height: 2000px;
  background: radial-gradient( orange, rgba(255, 255, 255, 0) 75%);
  opacity: 1;
  position: absolute;
  top:-800px;
  right:-800px;
  opacity: 0.5;
}
body {
  background: darkblue;
  overflow: hidden;
  padding:0;
  margin:0;
}
.container {
  max-width: 1600px;
  overflow: hidden;
  position: relative;
  height: 100vh;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css.css">
    <title></title>
  </head>
  <body>
  <div class="container">
    <div class="box">

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

    </div>
  </div>


  </body>
</html>

如何淡出渐变圆的边缘

How to fade out edges of gradient circles

css

gradient

radial-gradients