CSS Radial Gradient Styling

Question

I am trying to build banner with background that has radial gradient. I think I am close but cannot make my code exactly as design. Any help would be highly appreciated. I am not able to get proper colour and display only portion of first circle.

This the design I am trying to build enter image description here

and below is my code pen.

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>

I am new to CSS gradient and currently learning. I am seeking help so that I can design better. I have added both my problem and current attempt in description above. enter image description here

Answer 1

Based on your most recent comment, I made a simplified version of your UI with just a single circle, that has a brighter/glowing center, just to make everything easier to read and understand. Basically this code says "draw a circle with its center at x=10%, y=10%. The center of the circle should be #4C9DB0. At 9% of the circle's width, it should be #0C5D70, and then we should swap to transparent and stay there for the remainder of the circle". The documentation on radial gradients has more details on the formatting and different use cases.

The smooth transition from #4C9DB0 to #0C5D70 in the center of the circle is what produces the "glow" effect. #4C9DB0 is not any special number, I just shifted your provided color towards white; you can feel free to adjust as necessary.

.header-circles {
   width:100%;
   height: 100%;
   background-image: radial-gradient(circle at 10% 10%, #4C9DB0, #0C5D70 9%, transparent 9%) ;
   opacity:50%;
   position: absolute;
   z-index: 0;
  }
  
  .header3 {
    height : 200px;
    width: 100%;
    background-color:  #032D36;
    overflow:hidden;
    position: relative;
  }

<div class="header3">

  <div class="header-circles">
</div>