CSS background-image Property with radial-gradient Value
To display a radial gradient of colors as background, set CSS background-image property with radial-gradient() value.
The syntax of radial-gradient() function is
background-image: radial-gradient(shape size at position, color1, color2, ...);where
| Parameter | Description |
|---|---|
| shape size at position | Optional. shape: defines shape of gradient. [ellipse, circle]. Default value is ellipse. size: defines size of gradient. [farthest-corner, closest-side, closest-corner, farthest-side]. Default value is farthest-corner. position: defines position of gradient. [center]. Default value is center. |
| color1, color2, … | Two or more color values for gradient. Refer CSS Color Values. |
| stop1, stop2, … | Optional. A CSS length unit or percentage value between 0% and 100% to define the length of color along gradient axis. Refer CSS Length Units. |
If only one color value is passed to radial-gradient(), then this value is ignored.
Examples
In the following examples, we try out background-image with different kinds of values for radial-gradient().
background-image: radial-gradient(#FFA384, #74BDCB);
background-image: radial-gradient(#FF8961, #FFFB89, #74BDCB, #0E42C4);
background-image: linear-gradient(to right, #FFA384, #74BDCB);
background-image: linear-gradient(to bottom right, #FF7649, #24ABC6);
background-image: linear-gradient(30deg, #FFA384, #74BDCB);
background-image: linear-gradient(to right, #FF845C 25%, #38AEC6 50%);Radial Gradient with Two Colors
In the following example, we pass two colors to radial-gradient() function for background-image property.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
height: 200px;
width: 400px;
line-height: 200px;
text-align: center;
font-size: 50px;
}
#div1 {
background-image: radial-gradient(#FFA384, #74BDCB);
}
</style>
</head>
<body>
<div id="div1">Hello World</div>
</body>
</html>Radial Gradient with More than Two Colors
In the following example, we pass four colors to radial-gradient() for background-image property.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
height: 200px;
width: 400px;
line-height: 200px;
text-align: center;
font-size: 50px;
}
#div1 {
background-image: radial-gradient(#FF8961, #FFFB89, #74BDCB, #0E42C4);
}
</style>
</head>
<body>
<div id="div1">Hello World</div>
</body>
</html>Radial Gradient with Circle Shape
In the following example, we set radial-gradient() with shape: circle.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
height: 200px;
width: 400px;
line-height: 200px;
text-align: center;
font-size: 50px;
}
#div1 {
background-image: radial-gradient(circle, #FF8961, #FFFB89, #74BDCB, #0E42C4);
}
</style>
</head>
<body>
<div id="div1">Hello World</div>
</body>
</html>Radial Gradient with Size
In the following example, we set size with possible values in radial-gradient() for different div elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
height: 200px;
width: 400px;
margin: 10px;
line-height: 200px;
text-align: center;
font-size: 50px;
}
#div1 {
background-image: radial-gradient(circle farthest-corner, #FF8961, #FFFB89, #74BDCB, #0E42C4);
}
#div2 {
background-image: radial-gradient(circle closest-side, #FF8961, #FFFB89, #74BDCB, #0E42C4);
}
#div3 {
background-image: radial-gradient(circle closest-corner, #FF8961, #FFFB89, #74BDCB, #0E42C4);
}
#div4 {
background-image: radial-gradient(circle farthest-side, #FF8961, #FFFB89, #74BDCB, #0E42C4);
}
</style>
</head>
<body>
<div id="div1">farthest-corner</div>
<div id="div2">closest-side</div>
<div id="div3">closest-corner</div>
<div id="div4">farthest-side</div>
</body>
</html>Conclusion
In this CSS Tutorial, we learned different scenarios to work with radial-gradient() and background-image property, with examples.