How to use radial gradient in css

 CSS radial gradient

Radial gradients define the centre and the color transition outward from the center. The minimum color for making radial gradients is two.

What is the syntax of radial gradient?

The syntax of radial gradient is :

radial-gradient(first color name,second color name,so on);

What is an example of radial gradient?

Example:

Can we give a percentage in the radial gradient?

 yes we can give a percentage of the color ingredient and the syntax of giving percentage user color is that:

radial-gradient(first color name 80%,second color name20%,so on);

Example:

Can we remove the default shape of the radial gradient?

 yes we can change the default shape of the radial gradient, the default is shape is elliptical

Writing following syntax for changing the default shape.

.radial-gradient(circle at center , color name ,second color name);

.Example:

We can also change the position of the circle writing position along with the radial gradient.

.radial-gradient(circle at top, color name ,second color name);

At the place of the position, CSS   allows give the position in the percentage.

radial-gradient(circle 100px, color name ,second color name);

The above statement finds the circle along the but we can also define the position of the circle along the y axis as well as along x and y-axis both.

radial-gradient(circle 30px 40px, color name ,second color name);

 Using more than one radial gradient:

CSS gives the flexibility to use more than one gradient at a time. let's write the syntax:

radial-gradient(circle at top, color name ,second color name),

radial-gradient(circle at bottom, color name ,second color name),

radial-gradient(circle at left, color name ,second color name);

Example:

There are also other keywords for finding the size of the radial gradient. the following are the names of the keywords.

Closest-side.

Farthest-side.

Closest-corner.

Farthest-corner.

Closest-side:

 By using the closest keyword the shape of the gradient spreads toward the closest side.

radial-gradient(closest-side at 30% 40%, color name ,second color name);

Farthest-side:

By using the shortest side keyword the shape of the gradient spreads toward the far most side of the element in which radial-gradient use.

radial-gradient(farthest-side at 30% 40%, color name ,second color name);

Closest-corner:

By using the closest corner keyword the shape of the gradient spreads toward the closest corner of the element in which radial-gradient use.

radial-gradient(closest-corner at 30% 40%, color name ,second color name);

Farthest-corner:

By using the farthest-corner   keyword the shape of the gradient spreads toward the far most corner  of the element in which radial gradient use.

radial-gradient(farthest-corner at 30% 40%, color name ,second color name);

Repeating radial gradient:

Use with percentage: