CSS Gradient (excerpt)

CSS gradients Published: October 24, 2015 11:17:13 posted by: KidWeb Front end design

A css gradient is a newly added type in the CSS3 Image Module <image> . You can use CSS gradients to create smooth gradients between two colors. Instead of a picture, you can speed up the loading time of the page and reduce the bandwidth usage. At the same time, because the gradient is generated directly by the browser, it is better than the picture when the page is scaled, so you can adjust the layout of the page more flexibly and conveniently.

The browser supports two types of gradients: linear gradients (linear), linear-gradient function definitions, and radial gradients (radial), through radial-gradient function definitions.

Linear gradient

In order to create a linear gradient, you need to set a starting point and a gradient effect in one direction (specified as an angle). You'll also define the ending color. The end color is the transition you want gecko to smooth, and you have to specify at least two, and of course you can specify more colors to create more complex gradients.

Simple linear gradient

Here is a linear gradient starting from the middle (horizontal direction) and the top (vertical direction), starting in blue, and transitioning to white.

Screen	Live Demo

/* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */background: -prefix-linear-gradient(top, blue, white); /* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */background: linear-gradient(to bottom, blue, white);

(Viewing the browser Compatibility List overview prefix is necessary to support different browser versions).

Change the same gradient to run from left to right:

Screen	Live Demo

/* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */background: -prefix-linear-gradient(left, blue, white); /* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */background: linear-gradient(to right, blue, white);

(Viewing the browser Compatibility List overview prefix is necessary to support different browser versions).

You can tilt the gradient by specifying the starting position of the parallel and vertical, for example:

Screen	Live Demo

/* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */background: -prefix-linear-gradient(left top, blue, white); /* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */background: linear-gradient(to bottom right, blue, white);

Use angle

If you do not specify an angle, this will automatically be based on the given direction. If you prefer to control the direction of the gradient, you can set a specific angle.

For example, these two gradients, the first direction to the right, and the second with a 70-degree angle.

The one on the right uses this CSS style:

background: linear-gradient(70deg, black, white);

The angle is the angle between the horizontal and the gradient lines, which rotates in a counterclockwise direction. In summary, 0deg creates a vertical gradient from the bottom to the top, creating a horizontal gradient from left to right when it becomes 90deg.

background: linear-gradient(<angle>, red, white);

CSS Gradient (excerpt)