CSS3 Gradients

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

CSS3 defines two types of gradients:

``` Linear Gradients (goes down/up/let/right/diagonally)

``` Radial Gradients(defined by their center)

CSS3 Linear Gradients

Syntax

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

Linear Gradient - Top to Bottom(this is default)

            background:-webkit-linear-gradient(darkseagreen,khaki);
            background: -o-linear-gradient(darkseagreen,khaki);
            background: -moz-linear-gradient(darkseagreen,khaki);
            background: linear-gradient(darkseagreen,khaki);

Linear Gradient -Left to Right

            background: -webkit-linear-gradient(left,darkseagreen,khaki);
            background:-moz-linear-gradient(right,darkseagreen,khaki);
            background: -o-linear-gradient(right,darkseagreen,khaki);
            background: linear-gradient(to right,darkseagreen,khaki);

Linear Gradient - Diagonal
You can make a gradient diagonally by specifying both the horizontal and vertical starting postions

            background:  darkseagreen;/*For browsers that do not support gradients*/
            background: -webkit-linear-gradient(left top,darkseagreen,khaki);
            background: -o-linear-gradient(bottom right,darkseagreen,khaki);
            background: -moz-linear-gradient(bottom right,darkseagreen,khaki);
            background: linear-gradient(to bottom right,darkseagreen,khaki);/*Standard syntax*/

Using Angles

syntax

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

        #grad4{
            height: 100px; width: 600px; color: white; font-size: 24px; font-weight: bold;
            background: darkseagreen; /*For browser do not support gradient*/
            background: -webkit-linear-gradient(0deg,darkseagreen,khaki);
            background: -o-linear-gradient(0deg,darkseagreen,khaki);
            background: -moz-linear-gradient(0deg,darkseagreen,khaki);
            background: linear-gradient(0deg,darkseagreen,khaki);
        }
        #grad5{
            height: 100px; width: 600px; color: white; font-size: 24px; font-weight: bold;
            background: darkseagreen; /*For browser do not support gradient*/
            background: -webkit-linear-gradient(90deg,darkseagreen,khaki);
            background: -o-linear-gradient(90deg,darkseagreen,khaki);
            background: -moz-linear-gradient(90deg,darkseagreen,khaki);
            background: linear-gradient(90deg,darkseagreen,khaki);
        }
        #grad6{
            height: 100px; width: 600px; color: white; font-size: 24px; font-weight: bold;
            background: darkseagreen; /*For browser do not support gradient*/
            background: -webkit-linear-gradient(180deg,darkseagreen,khaki);
            background: -o-linear-gradient(180deg,darkseagreen,khaki);
            background: -moz-linear-gradient(180deg,darkseagreen,khaki);
            background: linear-gradient(180deg,darkseagreen,khaki);
        }
        #grad7{
            height: 100px; width: 600px; color: white; font-size: 24px; font-weight: bold;
            background: darkseagreen; /*For browser do not support gradient*/
            background: -webkit-linear-gradient(-90deg,darkseagreen,khaki);
            background: -o-linear-gradient(-90deg,darkseagreen,khaki);
            background: -moz-linear-gradient(-90deg,darkseagreen,khaki);
            background: linear-gradient(-90deg,darkseagreen,khaki);
        }

CSS3 Radial Gradients

A radial gradient is defined by its center
Syntax

background:radial-gradient(shape size at position,start-color,...,last-color)

Use of Different Size Keywords

closest-side

farthest-size

closest-corner

farthest-corner