Gradients

Various gradients with two or more colors.
Vertical 2 Colors
Horizontal 2 Colors
37 degrees 2 Colors
3 Colors
Multiple Colors Evenly Spaced
Multiple Colors Unequal
Radial Gradient
Radial Gradient - Differently Spaced
Radial Gradient Evenly Spaced
Radial Gradient Circle
Radial Gradient Repeating

Code Example

   #grad1 {
    height: 200px;
    width: 100%;
    margin: 10px 0;
    background-color: rgb(0, 132, 255); /* For browsers that do not support gradients */
    background-image: linear-gradient(rgb(8, 53, 160), rgb(0, 166, 255));}

   #grad2 {
    height: 200px;
    width: 100%;
    margin: 10px 0;
    background-color: rgb(0, 132, 255); /* For browsers that do not support gradients */
    background-image: linear-gradient(to right, rgb(8, 53, 160), rgb(0, 166, 255));}

   #grad3 {
    height: 200px;
    width: 100%;
    margin: 10px 0;
    background-color: rgb(0, 132, 255); /* For browsers that do not support gradients */
    background-image: linear-gradient(37deg, rgb(8, 53, 160), rgb(0, 166, 255));}

   #grad4 {
    height: 200px;
    width: 100%;
    margin: 10px 0;
    background-color: rgb(8, 53, 160); /* For browsers that do not support gradients */
    background-image: linear-gradient(rgb(8, 53, 160), rgb(0, 166, 255), rgb(8, 37, 125));}

   #grad5 {
    height: 200px;
    width: 100%;
    margin: 10px 0;
    background-color: rgb(8, 53, 160); /* For browsers that do not support gradients */
    background-image: linear-gradient(rgb(8, 53, 160), rgb(0, 166, 255), rgb(105, 106, 107), green, blue, indigo, rgb(130, 238, 141));}

   #grad6 {
    height: 200px;
    width: 100%;
    margin: 10px 0;
    background-color: rgb(8, 53, 160); /* For browsers that do not support gradients */
    background-image: linear-gradient(rgb(8, 53, 160) 10%, rgb(0, 166, 255) 55%, rgb(153, 10, 225) 90%);}