CSS background-image: radial-gradient()

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

Radial Gradient with More than Two Colors

In the following example, we pass four colors to radial-gradient() for background-image property.

Example

Radial Gradient with Circle Shape

In the following example, we set radial-gradient() with shape: circle.

Example

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.

TutorialKart

TUTORIALS

SAP

CRM

Apache

GUI

Programming

Databases

Mobile

Web & Server

Testing

CSS background-image: radial-gradient()

CSS background-image Property with radial-gradient Value

Examples

Radial Gradient with Two Colors

Radial Gradient with More than Two Colors

Radial Gradient with Circle Shape

Radial Gradient with Size

Conclusion

Popular Courses by TutorialKart

Salesforce

SAP

Accounts

Database

Programming

App Developement

Mac/iOS

Apache

Web Development

Online Tools