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.