CSS3 gradients let you display smooth transitions between two or more specified colors.

CSS3 defines two types of gradients:
Linear Gradients ( origin from any direction)
Radial Gradients ( origin from center )

CSS3-Gradients

Linear Gradients

direction: direction is optional. Default direction is top to bottom. We can also define direction to bottom right, to bottom left etc.

angle: angle is optional. simply define as 180deg.

270deg = direction top;
180deg = direction right;
90deg = direction bottom;
270deg = direction left;

Note: Form direction or angle in we can define any one at a time.

color : color is define as simply. For opacity use color as rgba.

stop: stop is define in pixel or percentage. Here is interesting thing is when we define two color one by that spread on each other.

gradient-spread

In this red and green color spread on each other and also white and green color spread on each other.

But if you not want to color spread on each other at that time write code show as below.

gradient-linear

TRY IT NOW

Radial Gradients

Difference between linear and radial gradient is that linear gradient origin from any direction and radial gradient origin form center.

TRY IT NOW