How to draw a circle with gradient border using CSS ?
Last Updated :
13 May, 2020
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 >
< 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...