CSS Gradients

This code sample demonstrates the syntax for linear gradients with two, three, and four color stops on Internet Explorer 10 Release Preview and higher.

For syntax that is supported on earlier versions of Internet Explorer 10 and other browsers, refer to the scenario1.css file.

Code

#twoStops
{
    background-image: linear-gradient(to bottom right,
                                      #FFFFFF 0%,
                                      #00A3EF 100%);
}
#threeStops
{
    background-image: linear-gradient(to bottom right,
                                      #FFFFFF 0%,
                                      #7EE581 50%,
                                      #00A3EF 100%);
}
#fourStops
{
    background-image: linear-gradient(to bottom right,
                                      #FFFFFF 0%,
                                      #7EE581 50%,
                                      #E0A565 75%,
                                      #00A3EF 100%);
}