CSS 径向渐变样式

Question

我正在尝试构建具有径向渐变背景的横幅。我认为我很接近但不能使我的代码完全符合设计。任何帮助将不胜感激。我无法获得正确的颜色并且只能显示第一个圆圈的一部分。

这是我要构建的设计

下面是我的密码笔

https://codepen.io/aneelk/pen/JjaeNqO

<template>
  <div id="app">
     <div class= "header3">
       <div class = "header-circles"></div>
         <p class="welcome-to-your-dash2">Welcome to your dashboard</p>
         <p class="left-text2">SCHOOL SMART GOALS : <span class='color-green'> 183 </span> SET  <span class='color-green'> 96</span> ARCHEIVED</p> 
  </div>    
  </div>
</template>

<script>
export default {
  data() {  
  },
  methods: {
    
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

  .color-green{
  height: 24px;
  width: 61px;
  color: #37B729;
  font-family: ".SF NS Display";
  font-size: 21px;
  letter-spacing: 0;
  line-height: 24px;
  }
  
     .header3 {
    height : 200px;
    width: 100%;
    background-color:  #032D36;
    overflow:hidden;
             position: relative;

  }
     .welcome-to-your-dash2 {
  color: #FFFFFF;
  font-family: "Open Sans";
  font-size: 24px;
  letter-spacing: 0;
    margin-top: 10%;
    margin-left: 10%;       
       z-index: 5;
    position: absolute;

  }
  .left-text2 {
   color: #FFFFFF;
   font-family: ".SF NS Display";
   font-size: 12px;
   color: #FFFFFF;
   margin-top: 10%;
   margin-right: 10%; 
   position: absolute;
   z-index: 5;
   right: 0;
  }  
  .header-circles {
   width:100%;
   height: 100%;
  background-image: radial-gradient(circle at -25% 50%,#fff 0%, #0D414D 0%, #0C5D70 0.1%, transparent),radial-gradient(circle at 60% 10%, #0C5D70 20%, #0D414D 5%, transparent), radial-gradient(circle at 10% 10%, #0C5D70 9%, #0D414D 1%, transparent) ;
     opacity:50%;
      position: absolute;
     z-index: 0;

  }
</style>

我是 CSS 渐变的新手，目前正在学习。我正在寻求帮助，以便我可以更好地设计。我在上面的描述中添加了我的问题和当前尝试。