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.

CSS background-image: linear-gradient()

The syntax of linear-gradient() function is

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

where

ParameterDescription
directionOptional. 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.

ADVERTISEMENT

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.