Background Gradient

Creating Gradient with CSS

With the background-color property in CSS, we can set a solid background color for html elements.

Appearances obtained by providing a smooth transition between two or more colors are called Gradients.

Thanks to CSS3, it has become possible to specify the background color as linear and radial (circular) gradients.

The linear-gradient function is used to obtain a linear gradient, and the radial-gradient property is used to obtain a circular gradient. 

In addition, -webkit-, -moz-, -o- prefixes are used for older versions of browsers.

background: linear-gradient( gradientDirection, color1, color2, ...);

Specifying the gradient direction above is optional. By specifying at least two colors, we can achieve a smooth transition between these colors.

Sample:

The reason for using the background-color property in this example is to ensure that this property is valid for browsers that do not support the gradient feature.

In the example, a gradient was obtained by specifying two colors. You can see the working versions of the codes in the topic examples section.

When we want to determine the direction of the gradient, the writing style may change for old browser types. All of the newer browsers support the linear-gradient feature. The normal spelling for creating a horizontal gradient from left to right is as follows:

background: linear-gradient(to right, blue, green);

If we want to specify the same direction for older versions, we can use it exactly like this:

It is also possible to create a diagonal gradient. This requires specifying both horizontal and vertical start/end positions. Again, the spelling changes for older browsers.

In the example below, a diagonal (cross) gradient is created from top left to bottom right.

Also, the direction of the gradient can be specified by giving an angle:

background: linear-gradient( -90deg , red, yellow);

To get a gradient using more than two colors, all that needs to be done is to write the colors one after the other, separating them with a comma.

background: linear-gradient( to right, red, orange, yellow, green, blue, indigo);

Creating Radial Gradient

A circular gradient can be obtained by using the radial-gradient property instead of linear-gradient.

Create a radial gradient by specifying how much of each color to use:

Depending on the ratio of width to height of the object to which the radial gradient is applied, the shape of the gradient will usually be an ellipse. If we want to obtain a circular gradient under all conditions, we can use the circle property.

background: radial-gradient( circle, red 5%, green15%, blue 60%); 

EXERCISES