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:
<!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(112, 9, 9) 0%, rgb(255, 89, 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>