Use of CSS linear-gradient

CSS Linear-gradient is a method of linear gradient in CSS. It can gradually change the background color or other visual effects within a range, making the visual effects of the page more vivid and three-dimensional. The following is a detailed explanation of the CSS linear-gradient.

Syntax Format

The syntax format of CSS linear-gradient is as follows:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Where direction represents the gradient direction, which can be one of the following:

to top：From bottom to top
to bottom：From top to bottom
to left：From right to left
to right：From left to right
to top left：From bottom right to top left
to top right：From bottom left to top right
to bottom left：From top right to bottom left
to <code>bottom right: From the top left to the bottom right

color-stop1 indicates the starting color of the gradient, which can be defined using a color code, RGB, or RGBA. color-stop2 indicates the ending color of the gradient. If a multi-color gradient is required, add more color-stops.

The following is an example using CSS linear-gradient to achieve a gradient from light blue to dark blue from left to right:

.gradient {
background: linear-gradient(to right, #87CEFA, #000080);
}

CSS linear-gradient compatibility

CSS linear-gradient is a new feature in CSS3. Currently, all major browsers support it, but older browsers may have compatibility issues and require other methods to achieve the gradient effect. The following is browser support:

Chrome 26.0+: Supported
Firefox 16.0+: Supported
Internet Explorer 10.0+: Supported
Safari 6.1+: Supported
Opera 12.1+: Supported

CSS linear-gradient for transition effects

CSS linear-gradient can not only create gradient background effects, but can also be combined with CSS3’s transition property to achieve other transition effects. Here’s an example that implements a background color gradient when the mouse hovers over it:

.gradient {
background: #87CEFA;
transition: background-color 1s ease-in-out;
}

.gradient:hover {
background: #000080;
}

Customizing the Gradient Direction

In addition to using the preset gradient directions, you can also customize the gradient angle as needed. The following example uses a custom gradient angle to create a gradient from the top left corner to the bottom right corner:

.gradient {
background: linear-gradient(45deg, #87CEFA, #000080);
}

Multiple Gradients

If you need multiple gradient overlays, separate them with commas. The following is an example of implementing a blue gradient from top to bottom and a white gradient from left to right:

.gradient { 
background: linear-gradient(to bottom, #87CEFA, #000080), linear-gradient(to right, #FFFFFF, #000000); 
}

Linear Gradient Repeating Methods

CSS linear-gradient also provides a variety of repeating methods, making the linear gradient effect more flexible. Here are a few common ones:

Looping

Use repeat to repeat the gradient until it fills the entire area. Here’s an example of achieving an infinitely repeating blue block from top to bottom:

.gradient { 
background: linear-gradient(to bottom, #87CEFA, #000080) repeat; 
/* Or use the following code */ 
background: repeating-linear-gradient(to bottom, #87CEFA, #87CEFA 10%, #000080 20%); 
}

Reverse Repeat

Use repeat-x or repeat-y to achieve reverse repeat. repeat-x indicates reverse repeat along the X axis, and repeat-y indicates reverse repeat along the Y axis. Here’s an example of alternating white and gray colors repeating in reverse from left to right:

.gradient {
background: linear-gradient(to right, #FFFFFF, #FFFFFF 50%, #9E9E9E 50%, #9E9E9E) repeat-x;
/* Or use the following code */
background: repeating-linear-gradient(to right, #FFFFFF, #FFFFFF 50%, #9E9E9E 50%, #9E9E9E);
}

Display only once

Use no-repeat to display only once, without repeating. The following example creates a gradient effect from the top left corner to the bottom right:

.gradient {
background: linear-gradient(45deg, #87CEFA, #000080) no-repeat;
}

Combining Effects

Finally, we can combine CSS linear-gradient with other CSS properties or selectors to achieve even more effects. Here are a few common examples:

Overlaying Background Images with Gradient Backgrounds

Overlaying a CSS linear-gradient gradient background with a background image creates a richer background effect. The following is an example of overlaying a blue block and an image from top to bottom:

.gradient {
background: linear-gradient(to bottom, #87CEFA, #000080), url("img.png") no-repeat center center;
}

Button and Link Styles

Use CSS linear-gradient to create button and link styles, primarily through the hover effect to provide users with more intuitive feedback. Here’s an example of a light blue to dark blue gradient effect for buttons and links:

.button {
background: linear-gradient(to bottom, #87CEFA, #000080);
color: #FFFFFF;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.5s ease-in-out;
}

.button:hover {
background: linear-gradient(to bottom, #6495ED, #00008B);
}

I am a button

Achieving Monochrome Images

Sometimes we need to create a monochromatic image of a specific color. We can use CSS linear-gradient to achieve this. Here’s an example of creating a red monochromatic image:

.image {
height: 200px;
background: linear-gradient(to bottom, #FF0000, #FF0000) no-repeat center center;
}

<div class="image"></div>

Conclusion

CSS linear-gradient is a simple and flexible way to create gradient effects. We can customize the gradient color and direction, as well as the gradient repetition method, to achieve a variety of effects. CSS linear-gradient also has good compatibility and composability, and can be combined with other CSS properties or selectors to achieve more visual effects.