CSS Tutorial
CSS Properties
CSS Advance
CSS Design
CSS Questions
Miscellaneous
CSS MCQ
- css-mcq
Interview Questions
- css-interview-questions

CSS radial-gradient() function

The radial-gradient() is an in-built CSS function which generates the smooth transitions between two or more than two colors. It sets the radial gradient as the background image. It can be a circular or elliptical shape.

It saves the bandwidth usages as well as helps to reduce the download time. In radial-gradient, the color emerges from a single point then spread outwards. A radial-gradient is defined by its center point and ending shape and two or more than two color stops.

Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Let's discuss its arguments.

position: It defines the gradient position. Its default value is center. It can be specified in units (such as px, em, etc.) or keywords (like bottom, left, etc.).

shape: It defines the shape of the gradient, which can either be circular or elliptical. If its value is not specified, then it sets to its default value, i.e., ellipse.

size: It defines the gradient size. Its possible values are:

farthest-corner
farthest-side
closest-corner
closest-side

Its default value is farthest-corner.

start-color, …., last-color : It holds the value of color followed by an optional stop position.

Let's try to understand the radial-gradient() function by using some illustrations.

Example1

<!DOCTYPE html>  
<html>  
    <head>  
        <title>CSS Gradients</title>  
        <style>  	
	#main {
  background-image: radial-gradient(black, yellow, green, blue);
}

            .hello {  
                text-align:center;  
                font-size:40px;
	  color:white;
                font-weight:bold;  
                padding:100px;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="main">  
            <div class = "hello">Hello World</div>    
        </div>  
    </body>  
</html> 

Test it Now

Example2

In this example, we are going to set the shape of radial-gradient.

<!DOCTYPE html>  
<html>  
    <head>  
        <title>CSS Gradients</title>  
        <style>  	
            #main {  
            height: 400px;  
            width: 600px;  
            background-image: radial-gradient(circle, violet, indigo, blue, green, yellow, orange, red);  
            }  
            .hello {  
                text-align:center;  
                font-size:40px;
	  color:white;
                font-weight:bold;  
                padding-top :130px;  
            }  
            .div2 {  
                font-size:35px;
	  color:white;
                text-align:center;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="main">  
            <div class = "hello">Hello World</div>  
            <div class = "div2">Welcome to the tutorialsinfo.com</div>  
        </div>  
    </body>  
</html> 

Test it Now

Example3

In this example, we are going to set the size of radial gradient.

<!DOCTYPE html>  
<html>  
    <head>  
        <title>CSS Gradients</title>  
        <style>
		.demo div {
		float: left;
		}
		.demo1 div {
		float: left;
		}
            #main1 {  
                height: 400px;  
                width: 600px;  
                background-image: radial-gradient(farthest-side at left bottom, red, yellow, cyan );  
	margin:20px;
				
            }
	#main2 {  
                height: 400px;  
                width: 600px;  
                background-image: radial-gradient(farthest-corner at right bottom ,blue, yellow,green);  
	margin:20px;
            }
			
	#main3 {  
                height: 400px;  
                width: 600px;  
                background-image: radial-gradient(closest-side , red, yellow, lightgreen); 		 	margin:20px;
            }  
			
	#main4 {  
                height: 400px;  
                width: 600px;  
                background-image: radial-gradient(closest-corner , blue, yellow, green);  
	margin:20px;
            }  
            .size {  
                text-align:center;  
                font-size:40px;
				color:black;
                font-weight:bold;  
                padding-top :130px;  
            }  

        </style>  
    </head>  
    <body>  
	<div class="demo">
        <div id="main1">  
            <div class = "size">farthest-side at left bottom</div>    
        </div>  
		<div id="main2">  
            <div class = "size">farthest-corner at right bottom</div>    
        </div> 
	</div>		
	<div class="demo1">		
		<div id="main3">  
            <div class = "size">closest-side</div>    
        </div>  
		<div id="main4">  
            <div class = "size">closest-corner</div>    
		</div>
	</div>
    </body>  
</html>

Test it Now

Next TopicCSS translate

← prev next →