Using CSS background:linear-gradient

With the continuous iteration and update of Internet technology, front-end developers need to continuously improve their skills to adapt to the changing times. This article will introduce a common CSS property – background:linear-gradient , and provide example code to help developers better understand and achieve their desired effects.

Understanding background:linear-gradient

Before introducing background:linear-gradient , let’s first understand what a gradient is.

A gradient is a transition from one color to another, appearing as a color change within a specific range. Gradients are characterized by gradual color transitions. Gradients can be categorized as linear or radial.

The CSS background property can set an element’s background color, image, position, and more. Its subproperty, background:linear-gradient, is used to set an element’s linear background gradient style.

background:linear-gradient Syntax and Parameters

background: linear-gradient(gradient_direction, color_stop1, color_stop2, …);

• gradient_direction: Gradient direction
• color_stop1, color_stop2, …: Gradient colors and their distribution
• to: Direction Keyword

gradient_direction: The direction of the gradient. You can specify the gradient direction using angles (deg) or using the direction keywords (to bottom, to top, to left, to right), left, top, bottom, and right.

A color stop is a set of points that describe each color component. A gradient can have an infinite number of colors, and each color is defined at each gradient stop. One gradient color naturally transitions to the next, creating a smooth transition. Color stops can occur anywhere.

Background: linear-gradient Examples

Example 1: Gradient Colors

The following example shows how to create a simple gradient background color within a container.

div{
background: linear-gradient(#fff, #000);
}

This statement means: Use a linear gradient from #fff to #000. This creates a gradient background color from white to black within the div.

Example 2: Setting a Gradient on Angle

Gradient from Top to Bottom

div{
background: linear-gradient(180deg, red, orange, yellow); 
} 

This statement means: Set a gradient in a 180-degree direction, from red, orange, to yellow.

Example 3: Setting the Gradient Position

div{ 
background: linear-gradient(to right, red 15%, orange 30%, yellow 60%); 
} 

This statement means: Set a linear gradient from left to right, starting with red, then orange at 15%, then yellow at 30%, and finally ending at 60%.

Example 4: Multicolor Gradient

div{ 
background: linear-gradient(to bottom, #f90 0%, #c00 25%, #f00 50%, #f90 75%, #ff0 100%); 
} 

This statement means: Apply a linear gradient vertically, from #f90 to #c00, then to #f00 at 50%, to #f90 at 75%, and finally to #ff0 at 100%.

Example 5: Gradients with More Than Two Colors

div{
background: linear-gradient(to bottom, 
#f90 0%, #c00 25%, #f00 50%, #f90 75%, #ff0 100%); 
} 

Unlike Example 4, this statement creates a linear gradient in the vertical direction, from #f90 to #c00, then to #f00 at 50%, then to #f90 again at 75%, and finally to #ff0 at 100%.

Example 6: Radial Gradient

div{
background: radial-gradient(circle, #f90, #c00, #ff0);
}

This statement means: Apply a radial gradient within the circle, from #f90 to #c00, and finally to #ff0.

Conclusion

The background: linear-gradient property in CSS is essential to master. It can create a variety of background gradient effects, such as gradient colors, color distributions, multi-color gradients, radial gradients, and more. Through practical examples, we can better understand the syntax and parameters of background: linear-gradient, unleash greater creativity, and achieve more beautiful design effects.