To create Holo Circle Gradient with CSS

Solution

HTMl Code 

  <div class=”watermark”></div>

CSS Code

.watermark {

        position: absolute;

        top: 24%;

        right: 70%;

        pointer-events: none;

        opacity:0.2;

        -webkit-transform:rotate(69.754deg);

        flex-shrink: 0;

        border-radius: 50%;

        width: 775px;

        height: 775px;

        border: double 125px transparent;

        border-radius: 50%;

        background-image: linear-gradient(white, white),

                          linear-gradient(to right, #7EAF00,#D8E7B3,transparent ,transparent);

        background-origin: border-box;

        background-clip: content-box, border-box;

      }

Note :- We can change the circle width, height and color according to our need by changing the value from CSS code 

Leave a comment

Your email address will not be published. Required fields are marked *