How to draw a circle with gradient border using CSS ?

CSS is used to create various shapes and styles with different colors or gradient. In this article, we will learn how to draw a circle with a gradient border.

Approach: We are going to create two div one is outer div with class outer_circle and another is inner div with class inner_circle. Outer div contains the big circle with gradient colour and inner div contains a small white circle which acts as an inner end of the circle creating a border of the circle. The linear-gradient is a CSS function which we are going to use to set a linear gradient as the background image.


 .class_name { background-image: linear-gradient(direction, color1, color2 } 

Parameters: This function accept three parameters as mentioned above and described below:

  • $direction: It specifies the direction to move the gradient.
  • $color1: It specifies the first colour stop.
  • $color2: It specifies the second colour stop.

Program: We can use the linear-gradient function to draw a circle with gradient border as given below:





<!DOCTYPE html>
    <!-- CSS -->
        .outer_circle {
            position: relative;
            margin: 50px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #ffffff;
        .inner_circle {
            background-image: linear-gradient(
                     to bottom, rgb(9, 112, 26) 0%,
                     rgb(21, 255, 0) 100%);
            content: '';
            position: absolute;
            top: -20px;
            bottom: -20px;
            right: -20px;
            left: -20px;
            z-index: -1;
            border-radius: inherit;
    <div class="outer_circle">
        <div class="inner_circle"></div>




My Personal Notes arrow_drop_up

I love Open Source Culture have contributed to phpMyAdmin, LibreOffice, Ant-Design and Web is my passion

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.