Previous chapter (CSS3 Effects - Shadows)Next chapter (CSS3 Effects - Transitions)

CSS Linear Gradient

The CSS linear-gradient function creates an effect which represents a linear gradient of colors on the element. The Top to Bottom gradient effects the element from top to bottom and the left to right gradient effects the element from left to right.

Other examples in Gradients (CSS3 Effects)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<head>
    <title>HtmlNest.com live html example</title>
    <style>
        div
        {
            height: 40%;
            width: 50%;
            color: #FFF;
        }
        .top_gr
        {
            background-image: linear-gradient(top, #900, #000);
            background-image: -moz-linear-gradient(top, #900, #000);
            background-image: -webkit-linear-gradient(top,#F30,#FF6);
            background-image: linear-gradient(top, #b032cb, #440951);
        }
        .left_gr
        {
            background-image: linear-gradient(left, #900, #000);
           	background-image: -moz-linear-gradient(left, #900, #000);
            background-image: -webkit-linear-gradient(left,#F30,#FF6);
            background-image: linear-gradient(top, #b032cb, #440951);
        }
    </style>
</head>
<body>
    <div class="top_gr">
        This is linear gradient from top to bottom
    </div>
    <br />
    <div class="left_gr">
        This is linear gradient from left to right
    </div>
    <br />
</body>
</html>

^1.0

^1.0

^1.0

^4.0

^4.0

CSS Linear Gradient

Useful Information