degrees

Linear Gradients - Using Angles

If you want more control over the direction of the gradient, you can define different angles, instead of using the predefined directions (to top, to right, to bottom, to left, to top left, to top right, to bottom right, to bottom left). The syntax to set your angle is:

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

The angle is specified as an angle between a horizontal line and the gradient line, going counter-clockwise. In other words:

The following demonstrates how to specify angles on linear gradients:

HTML file: Displayed by browser:
<style>
#grad1 {
    height: 100px;
    background: -webkit-linear-gradient(0deg, red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(0deg, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(0deg, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(0deg, red, blue); /* Standard syntax (must be last) */
}
#grad2 {
    height: 100px;
    background: -webkit-linear-gradient(90deg, red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(90deg, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(90deg, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(90deg, red, blue); /* Standard syntax (must be last) */
}
#grad3 {
    height: 100px;
    background: -webkit-linear-gradient(-90deg, red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(-90deg, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(-90deg, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(-90deg, red, blue); /* Standard syntax (must be last) */
}
#grad4 {
    height: 100px;
    background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(180deg, red, blue); /* Standard syntax (must be last) */
}
#grad5 {
    height: 100px;
    background: -webkit-linear-gradient(270deg, red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(270deg, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(270deg, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(270deg, red, blue); /* Standard syntax (must be last) */
}
</style>
<body>
<h3>Linear Gradients - Using Different Angles</h3>
<div id="grad1" style="color:white;text-align:center;">Grad1 : 0deg</div>
<br />
<div id="grad2" style="color:white;text-align:center;">Grad2 : 90deg</div>
<br />
<div id="grad3" style="color:white;text-align:center;">Grad3 : -90deg (minus reverses the direction)</div>
<br />
<div id="grad4" style="color:white;text-align:center;">Grad4 : 180deg</div>
<br />
<div id="grad5" style="color:white;text-align:center;">Grad5 : 270deg</div>
</body>

Linear Gradients - Using Different Angles

Grad1 : 0deg

Grad2 : 90deg

Grad3 : -90deg (minus reverses the direction)

Grad4 : 180deg

Grad5 : 270deg

Note: Internet Explorer 9 and earlier versions do not support gradients.

Back button Table of Contents Next button