Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to draw a circle with gradient border using CSS ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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
Last Updated : 13 May, 2020
Like Article
Save Article
Similar Reads
Related Tutorials