CSS gradients (gradient)

The gradient is divided into 4 categories

1: Linear gradient (Linear gradients)-down/up/left/right/diagonal

2: Radial gradient (Radial gradients)-defined by their center

3: Diagonal Gradient

4: Angle Gradient

Here is the code I wrote

div{float:left;width:100px;height:100px;}
. odiv1{
Background:-moz-linear-gradient (Red,blue);
Background:-webkit-linear-gradient (Red,blue);
Background:-ms-linear-gradient (Red,blue);
Background:-o-linear-gradient (Red,blue);
Background:linear-gradient (Red,blue);/* linear gradient from top to bottom by default */
}
. odiv2{
Background:-moz-radial-gradient (Red,blue);
Background:-webkit-radial-gradient (Red,blue);
Background:-ms-radial-gradient (Red,blue);
Background:-o-radial-gradient (Red,blue);
Background:radial-gradient (Red,blue);/* Radial gradient */
}
. odiv3{/* standard syntax (must be placed at the end) */
Background:-webkit-linear-gradient (Right,red,blue);
Background:-moz-linear-gradient (Right,red,blue);
Background:-ms-linear-gradient (Right,red,blue);
Background:-o-linear-gradient (Right,red,blue);
Background:linear-gradient (to Right,red,blue);/* Right-to-left gradient */
}
odiv4{/* a linear gradient in the upper-left corner of the diagonal gradient (to the lower-right corner) */
Background:-webkit-linear-gradient (left Top,red,blue);
Background:-moz-linear-gradient (bottom right,red,blue);
Background:-ms-linear-gradient (bottom right,red,blue);
Background:-o-linear-gradient (bottom right,red,blue);
Background:linear-gradient (to bottom right,red,blue);
}
. odiv5{/* gradient at 60 degrees */
Background:-webkit-linear-gradient (60deg,red,blue);
Background:-moz-linear-gradient (60deg,red,blue);
Background:-ms-linear-gradient (60deg,red,blue);
Background:-o-linear-gradient (60deg,red,blue);
Background:linear-gradient (60deg,red,blue);
}

<div class= "Odiv1" ></div>
<div class= "Odiv2" ></div>
<div class= "Odiv3" ></div>
<div class= "Odiv4" ></div>
<div class= "ODIV5" ></div>

Master do not spray Ah!

CSS gradients (gradient)