Types of CSS Gradient

CSS Gradients

The CSS Gradients are made of super cool transition between two or more different colors. They play major role in brand design every where you turn - in logos, web design, and everything in between. While gradients may come in many shapes, shades, and sizes, you will primarily see them in two types:

• linear gradient
• radial gradient 

The CSS linear gradient has become widely popular and can be seen all over the branding websites. To create a linear gradient, you need to specify at least two color stops.

Syntax

The syntax for the linear gradient is,

element{
background: linear-gradient(location, color-stops);
}

Example

The following example specifies the transition of the linear gradients.

element{
background: linear-gradient(#9be965,#e8f03a);
}

By default, the linear gradient flows from top to bottom, but you can change their location by specifying the direction.

element{
background: linear-gradient(to right, #9be965,#e8f03a);
}

You can even make linear gradient diagonally by following the below example,

element{
background: linear-gradient(to bottom right, #9be965,#e8f03a);
}

If you want to customize the different direction, you can use angle to control specific direction. The following example describes the controls over the angle.

element{
background: linear-gradient(180deg, #9be965,#e8f03a);
}

If you like to learn even more information about the linear gradients and the latest trends to apply them in logos and web design you can follow these two web sites, one is CSS Gradients and the other one is Color Space.

Using CSS Radial Gradients

The CSS radial gradients are used to make transitions like circular manner that starts from the center point.

element{
background: radial-gradient(position, start-color, .., end-color);
}

The following example illustrates the radial gradient,

element{
background: radial-gradient(#FF6F91,#845ec269,#845EC2);
}

By default, the radial gradient shape is ellipse but you can adjust them by using the absolute size or percentage.

element{
background: radial-gradient(#FF6F91 142px,#845ec269 30%,#845EC2 15%);
}

There are four different types of radial gradient sizes in CSS these are,

• farthest-side
• farthest-corner
• closest-side
• closest-corner

element{
background: radial-gradient(farthest-side 50% 35%,#FF6F91,#845ec269,#845EC2);
}

We believe in this article you have learnt more information about CSS gradients, if you like to know more examples in this topics or if you have any queries you can leave a comment in the comment section below or you can simply send a mail to us.