Open In App

How to draw a circle with gradient border using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Syntax:

 .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>
<html>
  
<head>
    <!-- CSS -->
    <style>
        .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;
        }
    </style>
</head>
  
<body>
    <div class="outer_circle">
        <div class="inner_circle"></div>
    </div>
</body>
  
</html>


Output:



Last Updated : 13 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads