Css Gradients (gradient) and cssgradients gradient

Css Gradients (gradient) and cssgradients gradient

Gradient is divided into four categories

1: Linear gradient (Linear Gradients)-downward/upward/left/right/diagonal

2: Radial Gradients-defined by their center

3: diagonal gradient

4: angle gradient

The code I wrote is as follows:

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 is 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);/* gradient from right to left */
}
. Odiv4 {/* diagonal gradient the linear gradient starting from the upper left corner (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>

Do not spray it!