CSS3-Set gradient color background, linear/radioactive/loop (with online gradient generation tool)

A gradient is a combination of colors. CSS3 to implement a gradient, you must use a gradient function to set the background or Background-image property. In order to be compatible with each browser (IE, Safari, Chrome, Firefox), you also need to add a corresponding gradient with the developer prefix.

1, linear gradient

Use the Linear-gradient () function to create a linear gradient.

(1) Setting of the gradient direction

The following shows a gradient from top to bottom and from top left to bottom.

<style>
#div1 {
Background:linear-gradient (top, white, blue);
Background:-ms-linear-gradient (top, white, blue);
Background:-webkit-linear-gradient (top, white, blue);
Background:-moz-linear-gradient (top, white, blue);
}

#div2 {
Background:linear-gradient (top left, white, blue);
Background:-ms-linear-gradient (top left, white, blue);
Background:-webkit-linear-gradient (top left, white, blue);
Background:-moz-linear-gradient (top left, white, blue);
}
</style>

<div id= "Div1" ></div>
<div id= "Div2" ></div>

(2) Set multiple gradients
Gradients are not only set to two, as long as they are listed in the following sequence.

#div1 {
Background:linear-gradient (left, red, yellow, lime, aqua, blue);
Background:-ms-linear-gradient (left, red, yellow, lime, aqua, blue);
Background:-webkit-linear-gradient (left, red, yellow, lime, aqua, blue);
Background:-moz-linear-gradient (left, red, yellow, lime, aqua, blue);
}

(3) Use the gradient point (gradient stop) to control the starting point of each color
Each gradient point is expressed as a percentage value, 0% is the starting point for the entire gradient, and 100% is the end of the entire gradient. The following examples extend the orange and yellow ranges to the middle:

#div1 {
Background:linear-gradient (left, Red 0, Orange 10%, yellow 90%, Violet 100%);
Background:-ms-linear-gradient (left, Red 0, Orange 10%, yellow 90%, Violet 100%);
Background:-webkit-linear-gradient (left, Red 0, Orange 10%, yellow 90%, Violet 100%);
Background:-moz-linear-gradient (left, Red 0, Orange 10%, yellow 90%, Violet 100%);
}

2, radioactive gradient

(1) using the Radial-gradient () function to create a radioactive gradient

The first parameter circle represents a circular gradient. The center of this radioactive gradient is white, and then gradually transitions to the pale blue of the circumference:

#div1 {
Background:radial-gradient (Circle, White, lightblue);
Background:-ms-radial-gradient (circle, White, lightblue);
Background:-webkit-linear-gradient (circle, White, lightblue);
Background:-moz-linear-gradient (circle, White, lightblue);
}

If you use ellipse to stretch the gradient into an ellipse:

#div1 {
Background:radial-gradient (ellipse, white, lightblue);
Background:-ms-radial-gradient (ellipse, white, lightblue);
Background:-webkit-radial-gradient (ellipse, white, lightblue);
Background:-moz-radial-gradient (ellipse, white, lightblue);
}

(2) Set multiple gradients

As with linear gradients, a radioactive gradient can also use more than one color.

#div1 {
Background:radial-gradient (circle, red, yellow, lime, aqua, blue);
Background:-ms-radial-gradient (circle, red, yellow, lime, aqua, blue);
Background:-webkit-radial-gradient (circle, red, yellow, lime, aqua, blue);
Background:-moz-radial-gradient (circle, red, yellow, lime, aqua, blue);
}

(3) Use the gradient point (gradient stop) to control the starting point of each color

In the example below, the gradient starts at red, slowly gradually changing to orange, and at the edge of the element, quickly transitions to yellow, purple

#div1 {
Background:radial-gradient (Circle, Red 10%, Orange 70%, yellow, violet);
Background:-ms-radial-gradient (circle, Red 10%, Orange 70%, yellow, violet);
Background:-webkit-radial-gradient (circle, Red 10%, Orange 70%, yellow, violet);
Background:-moz-radial-gradient (circle, Red 10%, Orange 70%, yellow, violet);
}

(4) Set the center position of the gradient

Below, use the AT keyword to tell the browser where to start, 70% off the left edge, 30% off the top edge.

#div1 {
Background:radial-gradient (circle at 70% 30%, White, lightblue);
Background:-ms-radial-gradient (circle at 70% 30%, White, lightblue);
Background:-webkit-radial-gradient (circle at 70% 30%, White, lightblue);
Background:-moz-radial-gradient (circle at 70% 30%, White, lightblue);
}

3, loop gradient

Linear-gradient () and radial-gradient () can only be graded once for the color you set.
Repeating-linear-gradient () and repeating-radial-gradient () loop continuously in the same color order until the color stripe fills the element.
The loop gradient function syntax is basically the same as a normal gradient. The only difference is that we need to make sure that the size of the gradient is limited (that is, the last color contains a percentage or pixel value) so that it can loop.

(1) Use a percentage to limit the gradient size

The following sample center color is white, and setting the gradient light blue ends at 10%. Then the gradient loop begins with white.

#div1 {
Background:repeating-radial-gradient (Circle, White, lightblue 10%);
Background:-ms-repeating-radial-gradient (circle, White, lightblue 10%);
Background:-webkit-repeating-radial-gradient (circle, White, lightblue 10%);
Background:-moz-repeating-radial-gradient (circle, White, lightblue 10%);
}

(2) Using fixed pixel values to limit the gradient size
The following sample has a fixed width of each stripe regardless of the size of the container (30px)

#div1 {
Background:repeating-linear-gradient (left, white, lightblue 30px);
Background:-ms-repeating-linear-gradient (left, white, lightblue 30px);
Background:-webkit-repeating-linear-gradient (left, white, lightblue 30px);
Background:-moz-repeating-linear-gradient (left, white, lightblue 30px);
}

4, set up a fallback scheme for browsers that are not supported
In the example above, gradients are implemented through the Background property. In fact, using the same gradient function for the Background-image property can also achieve the same purpose.
The difference is that using the Background property allows you to use a solid color as a fallback:
#div1 {
Background:lightblue;
Background:radial-gradient (Circle, White, lightblue);
Background:-ms-radial-gradient (circle, White, lightblue);
Background:-webkit-linear-gradient (circle, White, lightblue);
Background:-moz-linear-gradient (circle, White, lightblue);
}

Using the Background-image property, you can create a background picture as a fallback.
(Of course, it's also smart for browsers that support gradients, and it doesn't download backup pictures.) ）

#div1 {
Background-image:url (bg.jpg);
Background-image:radial-gradient (Circle, White, lightblue);
Background-image:-ms-radial-gradient (Circle, White, lightblue);
Background-image:-webkit-linear-gradient (Circle, White, lightblue);
Background-image:-moz-linear-gradient (Circle, White, lightblue);
}

5, online gradient generation tool
Access address: Ultimate CSS Gradient Generator
We only need to select the color in the Web page, adjust the controller until the gradient to achieve satisfactory results. The tool then generates the required code (including all code with different developer prefixes).