<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.con {
position: relative;
left: 36px;
top: 36px;
width: 600px;
height: 600px;
border-radius: 100px;
background-color: #7094f1;
overflow: hidden;
transform: rotate(170deg);
box-shadow: 0px 0px 20px -5px #333;
}
.r {
position: absolute;
border-radius: 50%;
opacity: 0.7;
}
.con-1 {
width: 900px;
height: 900px;
background-image: linear-gradient(#7094f1, #7fa0f9);
right: -450px;
top: -450px;
}
.con-2 {
width: 750px;
height: 750px;
background-image: linear-gradient(#8eadfe, #7fa0f9);
right: -375px;
top: -375px;
}
.con-3 {
width: 600px;
height: 600px;
background-image: linear-gradient(#a2c7fd, #98e1f7);
right: -300px;
top: -300px;
}
.con-4 {
width: 166px;
height: 166px;
background: #70b4f9;
left: -131px;
top: 100px;
}
.con-round {
width: 75px;
height: 75px;
background-image: linear-gradient(#6aecff, #bdeaff);
right: 380px;
top: 94px;
}
</style>
</head>
<body>
<div class="con">
<div class="con-1 r"></div>
<div class="con-2 r"></div>
<div class="con-3 r"></div>
<div class="con-4 r"></div>
<div class="con-round r"></div>
</div>
</body>
</html>
