CSS background-image Property with linear-gradient Value

To display a linear gradient of colors as background, set CSS background-image property with linear-gradient() value.

The syntax of linear-gradient() function is

background-image: linear-gradient(direction, color1 stop1, color2 stop2, ...);

where

Parameter Description
direction Optional. Defines a starting point and a direction along with the gradient effect.An angle can also be specified for direction. Default value is to bottom.
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 linear-gradient(), then this value is ignored.

Examples

In the following examples, we try out background-image with different kinds of values for linear-gradient().

background-image: linear-gradient(#FFA384, #74BDCB);
background-image: linear-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%);

Linear Gradient with Two Colors

In the following example, we pass two colors to linear-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: linear-gradient(#FFA384, #74BDCB);
        }
    </style>
</head>
<body>
    <div id="div1">Hello World</div>
</body>
</html>

Linear Gradient with More than Two Colors

In the following example, we pass four colors to linear-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: linear-gradient(#ff8961, #fffb89, #74BDCB, #0e42c4);
        }
    </style>
</head>
<body>
    <div id="div1">Hello World</div>
</body>
</html>

Linear Gradient with Direction

In the following example, we set linear-gradient() with direction: to right and two colors.

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: linear-gradient(to right, #FFA384, #74BDCB);
        }
    </style>
</head>
<body>
    <div id="div1">Hello World</div>
</body>
</html>

In the following example, we set linear-gradient() with direction: to bottom right and two colors.

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: linear-gradient(to bottom right, #ff7649, #24abc6);
        }
    </style>
</head>
<body>
    <div id="div1">Hello World</div>
</body>
</html>

In the following example, we set linear-gradient() with direction: 30deg (30 degrees) angle and two colors.

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: linear-gradient(30deg, #FFA384, #74BDCB);
        }
    </style>
</head>
<body>
    <div id="div1">Hello World</div>
</body>
</html>

Linear Gradient with Stop Values for Colors

In the following example, we set different stop values for colors in the linear gradient.

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;
            margin: 10px;
        }
        #div1 {
            background-image: linear-gradient(to right, #ff845c 25%, #38aec6 50%);
        }
        #div2 {
            background-image: linear-gradient(to right, #ff845c 50%, #38aec6 50%);
        }
        #div3 {
            background-image: linear-gradient(to right, #ff845c 40%, #38aec6 90%);
        }
        #div4 {
            background-image: linear-gradient(to right, #ff845c 80%, #38aec6 90%);
        }
    </style>
</head>
<body>
    <div id="div1">25%, 50%</div>
    <div id="div2">50%, 50%</div>
    <div id="div3">40%, 90%</div>
    <div id="div4">80%, 90%</div>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned different scenarios to work with linear-gradient() and background-image property, with examples.