[Vuejs]-CSS Radial Gradient Styling

by

0👍

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>

Leave a comment