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.