CSS3 gradient

CSS3 gradients

The CSS3 gradient allows you to display a smooth transition between two or more specified colors.

Previously, you had to use images to achieve these effects. H owever, by using the CSS3 gradient, you can reduce the use of downloaded events and broadband. In addition, elements of the gradient effect look better when zoomed in, because the gradient is generated by the browser.

CSS3 defines two types of gradients:

• Linear Gradients - Down/Up/Left/Right/Verse

• Radial Gradients - defined by their centers

Browser support

The numbers in the table specify the first browser version that fully supports the property.

The number that follows the -、- -webkit- or -o-specifies the first version of the property that requires a prefix to support.

CSS3 linear gradient

In order to create a linear gradient, you must define at least two color nodes. C olor nodes are the colors that you want to render a smooth transition. At the same time, you can set a starting point and a direction (or an angle).

Examples of linear gradients:

Grammar

Linear gradient - top to bottom (by default)

The following example shows a linear gradient starting at the top. The starting point is red, slowly transitioning to blue:

Linear gradient - left to right

The following example shows a linear gradient starting from the left. The starting point is red, slowly transitioning to blue:

Linear gradient - verse

You can create a veragonal gradient by specifying the starting position of both horizontal and vertical.

The following example shows a linear gradient starting in the upper left corner (to the lower right corner). The starting point is red, slowly transitioning to blue:

Use angle

If you want more control over the direction of the gradient, you can define an angle instead of predefined directions (to bottom, to top, to right, to left, to bottom right, and so on).

Grammar

Angle refers to the angle between the horizontal line and the gradient line, calculated counterclockwise. In other words, 0deg creates a bottom-to-top gradient, and 90deg creates a left-to-right gradient.

Note, however, that many browsers (Chrome, Safari, fiefox, etc.) use the old standard that 0deg creates a bottom-to-top gradient and 90deg creates a left-to-right gradient. Conversion formula 90 - x s y where x is the standard angle and y is the non-standard angle.

The following example shows how to use angles on a linear gradient:

Use multiple color nodes

The following example shows how to set multiple color nodes:

The following example shows how to create a linear gradient with rainbow colors and text:

Using Transparency

The CSS3 gradient also supports transparency, which can be used to create effects that weaken and fade.

To add transparency, we use the rgba() function to define color nodes. The last argument in the rgba() function can be a value from 0 to 1, which defines the transparency of the color: 0 for full transparency and 1 for complete opacity.

The following example shows a linear gradient starting from the left. The starting point is completely transparent, slowly transitioning to a completely opaque red:

Repeated linear gradients

The repeating-linear-gradient() function repeats the linear gradient:

CSS3 radial gradient

Radial gradients are defined by its center.

In order to create a radial gradient, you must also define at least two color nodes. C olor nodes are the colors that you want to render a smooth transition. Y ou can also specify the center, shape (round or oval), and size of the gradient. By default, the center of the gradient is center (for the center point), the shape of the gradient is ellipse (for the ellipse), and the size of the gradient is farthest-corner (for the farthest corner).

Examples of radial gradients:

Grammar

Radial gradient - color nodes evenly distributed (by default)

Radial gradient - Color nodes are unevenly distributed

Set the shape

The shape parameter defines the shape. I t can be a value circle or ellipse. W here circles are round and ellipse is oval. The default is ellipse.

Use of keywords of different sizes and sizes

The size parameter defines the size of the gradient. It can be the following four values:

• closest-side

• farthest-side

• closest-corner

• farthest-corner

Repeated radial gradients

The repeating-radial-gradient() function is used to repeat radial gradients: