Creating Gradients In CSS 3

creating gradient in css3

Types of Gradient

CSS3 has two types of gradients: Linear and Radial.

Linear Gradient

To create a linear gradient, you must define at least two colors. Example:

div {    background:linear-gradient(Skyblue,white);  } 

Multiple Color.

Gradients colors can be added one after the other, separated with a comma. Example:

background:linear-gradient(blue, yellow, green, pink, white);

Direction of the linear gradient

The direction of the gradient can be changed. The first gradient will start at left, moving right; the second one runs from bottom to top. Example:

 div.first {    background:linear-gradient(left, blue, green, white); }  div.second {     background:linear-gradient(bottom, blue, green, white); } ;

Radial Gradient

Radial gradient works like linear gradient, but the difference is that linear gradient is from top to bottom while radial gradient appears in ellipse and circle form. Ellipse is the default form. Example:

 div.first {    background:radial-gradient(green, yellow, blue);    } div.second {    background:radial-gradient(circle, green, yellow, blue);  } Note: Where a color end can be specified with percentages. Example: background: radial-gradient(circle, green 40%, yellow 50%, blue 70%);