【CSS】background-gradient function linear-gradient()

linear-gradient() usage example:

1. Example 1

.gradient-background {
  background: linear-gradient(to right, #ff0000, #00ff00);
}

In the above example, to right means that the direction of the gradient color is horizontal, and #ff0000 and #00ff00 are two color values, representing the starting color and ending color of the gradient.

More color values ​​can be specified to create multi-color gradients. For example, the following code creates a horizontal gradient background from red to green to blue:

.gradient-background {
  background: linear-gradient(to right, #ff0000, #00ff00, #0000ff);
}

2. Example 2 : Create a background gradient with clear dividing lines, which can be achieved by using multiple color stops. Each stop represents a change point in color

.gradient-background {
  background: linear-gradient(to right, #ff0000 0%, #ff0000 50%, #00ff00 50%, #00ff00 100%);
}

In the example above, two color stops are set at 50%, #ff0000 and #00ff00, representing the transition from red to green respectively.