CSS3 linear-gradient

Here is a brief definition and the explanation on the usage of the Linear Gradients property

Explanation

CSS3 Linear Gradients is used to display smooth transitions between two or more specified colors. The elements generated with CSS3 gradients look better when zoomed, because the gradient is generated by the browser.
CSS3 defines two types of gradients:
Linear Gradients

Property :

background: linear-gradient(direction|angle,color-stop1,color-stop2,..);

Usage:


background: linear-gradient(red, blue);
background: linear-gradient(to right, red , blue);
background: linear-gradient(to bottom right, red , blue);
background: linear-gradient(180deg, red, blue);

Definition:

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Example 1:


<div style=' background: linear-gradient(to right, yellow,indigo);
background: -webkit-linear-gradient(right, yellow,indigo); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, yellow,indigo); /* For Opera 11.1 to 12.0 */
padding:30px;width:200px;height:70px;'>
This is an example for CSS3 linear-gradient property.</div>

Result:
This is an example for CSS3 linear-gradient property.


Example 2:


You can make a gradient diagonally by specifying both the horizontal and vertical starting positions. The following example shows a linear gradient that starts at top left (and goes to bottom right).
<div style=' background: linear-gradient(to bottom right, yellow,indigo);
background: -webkit-linear-gradient(to bottom right, yellow,indigo); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(to bottom right, yellow,indigo); /* For Opera 11.1 to 12.0 */
padding:30px;width:200px;height:70px;'>
This is an example for CSS3 linear-gradient property.</div>

Result:
This is an example for CSS3 linear-gradient property.


Example 3:


<div style=' background: linear-gradient(to bottom right, yellow,indigo);
background: -webkit-linear-gradient(to bottom right, yellow,indigo); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(to bottom right, yellow,indigo); /* For Opera 11.1 to 12.0 */
padding:30px;width:200px;height:70px;'>
This is an example for CSS3 linear-gradient property.</div>

Result:
This is an example for CSS3 linear-gradient property.


Example 4:


<div style=' background: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
background: -webkit-linear-gradient(right, red,orange,yellow,green,blue,indigo,violet); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,orange,yellow,green,blue,indigo,violet); /* For Opera 11.1 to 12.0 */
padding:30px;width:200px;height:70px;'>
This is an example for CSS3 linear-gradient property.</div>

Result:
This is an example for CSS3 linear-gradient property.



Ask Questions

Ask Question