CSS3 Linear Background Gradient

• 2005 35%
• 2006 55%
• 2007 25%
• 2008 65%
• 2009 75%
• 2011 100%

Rainbow

.rainbow {
    background-image: -moz-linear-gradient(left,
                                   red,
                                   orange,
                                   yellow,
                                   green,
                                   blue,
                                   indigo,
                                   violet
                                );
    
    background-image: -webkit-gradient(linear, left top, right top,
                                   from(red),
                                   color-stop(16%, orange),
                                   color-stop(32%, yellow),
                                   color-stop(48%, green),
                                   color-stop(64%, blue),
                                   color-stop(80%, indigo),
                                   to(violet)
                                );
}    
    

Diagonal

.diag {
    width: 200px;
    height: 200px;
    /*
     * degree specifies start color position to end color position.
     * 0deg = left to right
     * -45deg = left top to right bottom,
     * -90deg = top to bottom,
     * -135deg =  right top to left bottom,
     * -180deg = right to left,
     * 45deg = left bottom to right top
     * 90deg = bottom to top
     * 135deg = right bottom to left top
     * 180deg = right to left
     */
    background-image: -moz-linear-gradient(-45deg, #A2D106, #275700);
    background-image: -webkit-gradient(linear,
                                    left top,
                                    right bottom,
                                    color-stop(0.00, #A2D106),
                                    color-stop(1.00, #275700)
                                );
}
    

Partial Gradient - 40%-60%

.partial-gradient {
    background-image: -moz-linear-gradient(left,
                                   red 40%,
                                   green 60%);
    background-image: -webkit-gradient(linear,
                                   left top, right top,
                                   color-stop(40%, red),
                                   color-stop(60%, green)
                                   );
}
    

Partial Gradient - 0%-60%

.partial-gradient2 {
    background-image: -moz-linear-gradient(left,
                                   blue,
                                   brown 60%);
    background-image: -webkit-gradient(linear,
                                    left top, right top,
                                    from(blue),
                                    color-stop(60%, brown)
                                    );
}
    

li {
    /* older browsers : FF3, 3.5 */
    background-color: #A2D106;
    /* Firefox 3.6 */
    background-image: -moz-linear-gradient(top, #A2D106, #6C9C03);
    /* Webkit: Safari, Chrome */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#A2D106), to(#6C9C03));
    /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(
        enabled='true',
        startColorstr=#A2D106,
        endColorstr=#6C9C03,
        GradientType=0
       ); 
}