Is there a way to achieve a gradient fade out effect without the lines around the circles? I want to create a nice gradient shine/glow effect by removing those surrounding lines. Check out the full page code snippet below for reference.
.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>