Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
The radial-gradient() function
3.
Why do we use radial-gradient() function?
3.1.
Syntax of radial-gradient function
4.
Examples
4.1.
Closest-side
4.2.
Farthest-side
4.3.
Closest-corner
4.4.
Farthest-corner
5.
Repeating-radial-gradient
6.
Frequently Asked Questions
6.1.
What do you mean by radial-gradient?
6.2.
What is the use of shape, size, and position parameters in the syntax of radial-gradient?
6.3.
What is repeating-radial-gradient?
6.4.
What are the shapes of radial gradients?
7.
Conclusion
Last Updated: Mar 27, 2024
Easy

What is Radial Gradient Function in CSS?

gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

Do you know that CSS offers various methods to enhance the visual appearance of our webpage, ‘radial-gradient()’ function is one such method using which we can add one or more colors to our webpage and color overlay our webpage?

What is radial gradient function in CSS?

Do you know what is ‘radial-gradient()’ function in CSS? If not, then don't worry. In this article, we will go all in and out about radial-gradient. We will discuss the radial gradient function in CSS, why we use it, and its syntax and parameters. We will also understand its use using code snippets and images for a better understanding.

The radial-gradient() function

This function helps in creating radial gradients. Radial gradients in CSS start from a center point and radiate outward in an elliptical or circular shape. This function accepts one or more colors as an argument that defines the colors and positions along the gradient. The function also accepts two optional parameters.

These two optional parameters are:

  • Shape of gradient: This parameter specifies the gradient's shape. The default shape of the gradient is an ellipse.
     
  • Center point's position of the gradient: It is used for specifying the center point's position of the gradient, which can be:‘center’, ‘top,’ ‘right,’ ‘bottom,’ or ‘Left’ (top-left, top-right, bottom-left, bottom-right) or an x and y coordinate.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Why do we use radial-gradient() function?

The radial-gradient() is used for creating smooth color transitions or gradients on an element. We can create complex color effects using it. We can use this function where we want smooth color transitions, background textures, color overlays, and Depth and shadows.

Syntax of radial-gradient function

background: radial-gradient(<shape> <size> <position>, <ColorStart1>,<color2>,....<colorEnd>);


In the above syntax, The ‘shape’ (optional): This parameter specifies the gradient's shape. The default shape of the gradient is an ellipse. The ‘size’ (optional): This parameter specifies the size of the gradient. This can be : 

  • ‘closest-side’
  • ‘closest-corner’
  • ‘farthest-side’
  • ‘farthest-corner’
     

‘position’ (optional): It is used for specifying the center point's position of the gradient. This can be:‘center’, ‘top,’ ‘right,’ ‘bottom,’ or ‘Left’ (top-left, top-right, bottom-left, bottom-right) or an x and y coordinate.

‘colorStop’: It specifies the color and position of a color stop along the gradient.

Examples

Below are the examples. 

HTML code

<!DOCTYPE html>
<head>
 <link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<title>CodingNinjas</title>
<body>
<div class="box">

   Coding Ninjas
 
</div>
</body>
</html>


CSS code

* {
 background-color: antiquewhite;
 font-family: cursive;
}
.box {
 background: radial-gradient(circle, orange, rgb(221, 157, 54), white);
 width: 40%;
 height: 40%;
 position: absolute;
 border: solid;
 display: flex;
 justify-content: center;
 align-items: center;
 margin: auto;
 border-radius: 100px;
}


Output

output

 

In the above example, the radial-gradient() function creates a gradient radiating from a specific point. We have used ‘circle’ as a shape value. This creates a circular gradient.

The color changes through three specified colors, i.e., ‘orange’(color of the gradient at the center), ‘rgb(221,157,54)’ (middle color), and ‘white’ (end color). Therefore the ‘background’ property creates a radial gradient background which starts with orange color at the center, then goes to a yellowish shade in the middle, and ends with white color.

Four different keywords are used in CSS to specify the size and shape of the gradient. These are mentioned below:

Closest-side

Using the ‘closest-side’ keyword, the gradient ending shape meets the box's side closest to its center for the circles. Therefore the gradient ends at the closest side of the element, which can be top, bottom, left, or right.

CSS

.box {
 background: radial-gradient(
   closest-side at 34%,
   orange,
   rgb(221, 157, 54),
   white
 );
 width: 50%;
 height: 50%;
 position: absolute;
 display: flex;
 margin: auto;
 border: solid;
 justify-content: center;
 align-items: center;
 margin: auto;
 border-radius: 40px;
}


Output

output

 

Farthest-side

Using ‘farthest-side,’ the gradient ends at the farthest side of the element. We can see below that the radial gradient is being stretched on the right side, i.e., the gradient stretches to the maximum possible radius such that it can cover the entire element.

CSS

* {
 background-color: antiquewhite;
 font-family: cursive;
}
.box {
 background: radial-gradient(
   farthest-side at 40%,
   orange,
   rgb(221, 157, 54),
   white
 );
 width: 50%;
 height: 50%;
 position: absolute;
 display: flex;
 margin: auto;
 border: solid;
 justify-content: center;
 align-items: center;
 margin: auto;
 border-radius: 40px;
}


Output

output

 

Closest-corner

Using ‘closest-corner,’ the gradient ends at the corner of the element, closest to the starting point of the gradient. The code below specifies that the gradient ends at the corner of the element. The starting point of the gradient is 40% of the way across the element, which means that the gradient will be elliptical or circular but with a smaller radius as compared to ‘the farthest side or  ‘closest-side.’

CSS 

* {
 background-color: antiquewhite;
 font-family: cursive;
}
.box {
 background: radial-gradient(
   closest-corner at 40%,
   orange,
   rgb(221, 157, 54),
   white
 );
 width: 50%;
 height: 50%;
 position: absolute;
 display: flex;
 margin: auto;
 border: solid;
 justify-content: center;
 align-items: center;
 margin: auto;
 border-radius: 40px;
}


Output

output

 

Farthest-corner

By using ‘farthest-corner’, the gradient ends at the corner of the element, farthest from the starting point/center of the gradient. It is the opposite of the ‘closest corner’.

CSS

* {
 background-color: antiquewhite;
 font-family: cursive;
}
.box {
 background: radial-gradient(
   farthest-corner at 40%,
   orange,
   rgb(221, 157, 54),
   white
 );
 width: 50%;
 height: 50%;
 position: absolute;
 display: flex;
 margin: auto;
 border: solid;
 justify-content: center;
 align-items: center;
 margin: auto;
 border-radius: 40px;
}


Output

output

 

Repeating-radial-gradient

The repeating radial-gradient () function is used for creating an image of repeating gradients that diverges from an origin. It accepts the same arguments as radial-gradient(). This type of radial gradient radiates outward in a circular path, repeating a similar pattern at regular intervals. We can adjust the gradient's colors, size, and shape to create different effects and patterns.

CSS

* {
 background-color: antiquewhite;
 font-family: cursive;
}
.box {
 background: repeating-radial-gradient(
   circle closest-side at 20%,
   orange,
   rgb(221, 157, 54),
   white
 );
 width: 50%;
 height: 50%;
 position: absolute;
 display: flex;
 margin: auto;
 border: solid;
 justify-content: center;
 align-items: center;
 margin: auto;
 border-radius: 40px;
}


Output

output

 

Frequently Asked Questions

What do you mean by radial-gradient?

This function helps in creating radial gradients. Radial gradients in CSS start from a center point and radiate outward in an elliptical or circular shape. This function accepts one or more colors as an argument that defines the colors and positions along the gradient. The function also accepts two optional parameters.

What is the use of shape, size, and position parameters in the syntax of radial-gradient?

In the syntax of radial gradient. The ‘shape’ (optional) specifies the gradient's shape. The default shape of the gradient is an ellipse. The ‘size’ (optional) parameter specifies the size of the gradient. The ‘position’ (optional) is used to specify the center point's position of the gradient. This can be: ‘center’, ‘top,’ ‘right,’ ‘bottom,’ or ‘Left’ (top-left, top-right, bottom-left, bottom-right) or an x and y coordinate.

What is repeating-radial-gradient?

The repeating radial-gradient() function is used for creating an image of repeating gradients that diverges from an origin. It accepts the same arguments as radial-gradient(). This type of radial gradient radiates outward in a circular path, repeating a similar pattern at regular intervals. We can adjust the gradient's colors, size, and shape to create different effects and patterns.

What are the shapes of radial gradients?

The shape of a radial gradient can be a circle or an ellipse. The default shape is an ellipse.

Conclusion

We hope this article helped you with the radial gradient function in CSS. In this article, we discussed radial gradient function in CSS, why we use it, and its syntax and parameters. We have also outlined its key features by providing an example. You can read more such articles on our platform, Coding Ninjas Studio.

Also, Read-

You will find straightforward explanations of almost every topic on this platform. So take your coding journey to the next level using Coding Ninjas.

Happy coding!

Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass