CSS 3 Gradient

Gradient is a way of smooth image color transition from one color to other color. Now as of 2013 all the major browsers support the gradient. With support of the gradient we can have any number of combination of color using programming, unlike creating and deploying the images.
   Following are the type of gradients:
   1. Linear Gradient
   2. Radial  Gradient  
   3. Repeating Linear Gradient
   4. Repeating Radial Gradient  

When the gradients was introduced it was not supported so there are many prefixes used by different browser.

The gradient is used as the CSS <image>, so we can use the gradients with background property or background-image property.

1. linear-gradient

      The  linear gradient is defined by a line and the colors arranged by the line. Also each line has a color. The lines are perpendicular to the direction of the line.

          

Syntax:

linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

[angle] :
           The angle for the direction of the gradient can be decided by this.

to [side-or-corner] :
               It decides the starting point for the gradient. It has two attributes required, one decides the left or right horizontal line and thee other one decides the top or bottom vertical line. So it can be "to top" or "to bottom" or "to left bottom".

[color-stop] :
               The color stop defines the colors for the gradient. It defines the color and length of the color along the image. The length can be define in pixels or in percentage.

Example:

Following example will be supported by version of those which support above syntax of the gradient


In the beginning the gradient property was not supported by the major browser and their syntax was not unified. Hence each browser had its own syntax, following is list of some browsers and their synatx:

Mozilla(From version 3.6 to 15.0)

-moz-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

-moz- prefix is used for the Gecko browsers from the version 3.6 to 15.0. After 16.0 the syntax without prefix is used.

Webkit Browsers

   The syntax for the webkit browsers Chrome version 4.0 to 10.0, Safari 4.0 and 5.0 is as follows:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*);

<type>: It can be linear or radial.

<point> [, <radius>]? : Start or end point for the linear and radius for the radial gradient.

<stop>: Color stops.

The webkit syntax for Chrome 11.0+ and safari 6.0 + is as follow:

-webkit-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

For chrome 26+ and safari 7+ sypport non prefix syntax for Gradient.

Opera Browser

The Opera has used a -o- prefix for gradient support of gradient since 11.1+ version, earlier version did not support the gradient.

-o-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

Internet Explorer Browser

The support for gradient in IE can be distinguished with as IE 6-9, IE 10 and IE 11+.

IE 6-9

   The internet explorer supported the browser using different syntax: 

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=red, endColorstr=green);

Or

-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=red, endColorstr=green);

GradientType:  Can be 0 or 1.

But the above syntax supports only two colors for gradient.

IE 10

   Microsoft also used a prefixed synatx for IE10 version, the prefix is -ms-

-ms-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

IE11+

      For this version onward's syntax without prefix is used :

linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

Example With Browser Support:



   2. Radial  Gradient  

     The radial gradient is defined from a center point and transition of the colors from one to another happens in a circular manner.
Following is the syntax for radial gradient:

Syntax:
radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )


<ending-shape> : 
              This can be circle or ellipse, it decides the shape of gradient either circle or ellipse.

<position> :
          This decides the center of the radial gradient. Default value for this is circle.

<size>:
          This decides the size of the ending shape. It has various values and defined as follow :

1. closest side :  The ending shape will be shaped at the closest side of the gradient center.
2. farthest side : The ending shape will be shaped at the farthest side of the gradient center.
3. closest corner: The ending shape will be sized so that it passes through the closest corner of gradient center.
4. farthest corner: The ending shape will be sized so that it passes through the farthest corner of gradient center.

[color-stop] :
               The color stop defines the colors for the gradient. It defines the color and length of the color along the image. The length can be define in pixels or in percentage.


Like the linear gradient, there are different gradient syntax for the radial gradient. Following is the browser wise syntax for the radial gradient:

Mozilla(From version 3.6 to 15.0)

-moz-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )

-moz- prefix is used for the Gecko browsers from the version 3.6 to 15.0. After 16.0 the syntax without prefix is used.

Webkit Browsers

   The syntax for the webkit browsers Chrome version 4.0 to 10.0, Safari 4.0 and 5.0 is as follows:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*);

<type>: It can be linear or radial.

<point> [, <radius>]? : Start or end point for the linear and radius for the radial gradient.

<stop>: Color stops.

The webkit syntax for Chrome 11.0+ and safari 6.0 + is as follow:

-webkit-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ );

For chrome 26+ and safari 7+ sypport non prefix syntax for Gradient.

Opera Browser

The Opera has used a -o- prefix for gradient support of gradient since 12.1+ version, earlier version did not support the gradient.

-o-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )

Internet Explorer Browser

The support for gradient in IE can be distinguished with as IE 6-9, IE 10 and IE 11+.

IE 6-9

   These versions of  internet explorer does not support radial gradient.

IE 10

   Microsoft also used a prefixed synatx for IE10 version, the prefix is -ms-

-ms-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )
(Consumer Preview version)

IE11+

      For this version onward's syntax without prefix is used :

radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )

(Released version of IE 10 also supported above syntax)

Example With Browser Support:

   3. Repeating Linear Gradient

The repeating linear gradient is same as the linear gradient, only the colors are repeated in both the directions. The browser support for this is same as the linear gradient, except for IE which started support after IE10.


Syntax:

repeating-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);


Example:




  3. Repeating Radial Gradient

The repeating radial gradient is same as the linear gradient, only the colors are repeated in all the directions. The browser support for this is same as the linear gradient, except for IE which started support after IE10.


Syntax:

-repeating-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )


Example: