CSS Gradients

This code sample demonstrates the syntax for circular and elliptical radial 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 scenario2.css file.

Code

#twoStops
{
    background-image: radial-gradient(ellipse farthest-corner at center,
                                      #FFFFFF 0%,
                                      #00A3EF 100%);
}
#threeStops
{
    background-image: radial-gradient(ellipse farthest-corner at center,
                                      #FFFFFF 0%,
                                      #10BCA3 50%,
                                      #00A3EF 100%);
}
#fourStops
{
    background-image: radial-gradient(ellipse farthest-corner at center,
                                      #FFFFFF 0%,
                                      #10BCA3 50%,
                                      #9DC245 75%,
                                      #00A3EF 100%);
}
#fourStopsCircle
{
    background-image: radial-gradient(circle farthest-corner at center,
                                      #FFFFFF 0%,
                                      #10BCA3 50%,
                                      #9DC245 75%,
                                      #00A3EF 100%);
}