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
Linear Gradient with More than Two Colors
In the following example, we pass four colors to linear-gradient() for background-image property.
Example
Linear Gradient with Direction
In the following example, we set linear-gradient() with direction: to right
and two colors.
Example
In the following example, we set linear-gradient() with direction: to bottom right
and two colors.
Example
In the following example, we set linear-gradient() with direction: 30deg
(30 degrees) angle and two colors.
Example
Linear Gradient with Stop Values for Colors
In the following example, we set different stop values for colors in the linear gradient.
Example
Conclusion
In this CSS Tutorial, we learned different scenarios to work with linear-gradient() and background-image property, with examples.