How to fade out edges of gradient circles

I am trying to achieve this gradient effect gradient fade out effect. I would be happy with my code if there wouldn't be those lines around my cricles. How to make them fade out to make nice gradient shine/glow effect? I just want to get rid of those surrounding lines. (Watch code snipper on full page)

.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>

Solution

The circles that you are seeing come from the combination of an opacity and a border-radius. I believe that your intended result is more close to removing border-radius.

Also, (but this is subjective) Probably "white" transparent is better than "black" transparent that is the default. Of course, transparent doesn't care about the color, but the transition does, and gives a darker color.

.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>