<div class="shapes_container">
  <div class="circle circle--main"></div>
  <div class="circle circle--2"></div>
  <div class="circle circle--3"></div>
  <div class="circle circle--4"></div>
</div>

html,body{
    margin:0;
}
body {
  background-color: #06433c;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100uv;
}
.shapes_container {
  width: 1200px;
  height: 1200px;
  position: relative;
  filter: blur(10px);
  animation: float 5s infinite;
}
.shapes_container > .circle {
    /*backdrop-filter: blur(10px);*/
}
.shapes_container > .circle--main {
  position: absolute;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(#fbb752, transparent 80%);
  border-radius: 50%;
  z-index: 3;
}

.shapes_container > .circle--2 {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 0;
  right: 0;
  /*transform: translate(-50%, -50%);*/
  background: radial-gradient(#EE7752, transparent 70%);
  border-radius: 50%;
  z-index: 2;
}

.shapes_container > .circle--3 {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 30%;
  left: 0;
  /*transform: translate(-50%, -50%);*/
  background: radial-gradient(#23D5AB, transparent 70%);
  border-radius: 50%;
  z-index: 1;
}
.shapes_container > .circle--4 {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 20%;
  right: 0;
  /*transform: translate(-50%, -50%);*/
  background: radial-gradient(#E73C7C, transparent 70%);
  border-radius: 50%;
  z-index: 1;
}

@keyframes float {
  0%, 100% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(-25px);
  
  }
}