CSS Gradients

This code sample demonstrates the syntax for repeating linear and radial gradients 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 scenario3.css file.

Code

#twoStops
{
    background-image: repeating-linear-gradient(to bottom right,
                                                #FFFFFF 30px, #00A3EF 60px);
}
#threeStops
{
    background-image: repeating-radial-gradient(ellipse farthest-corner at center,
                                                #FFFFFF 30px, #00A3EF 60px);
}
#fourStops
{
    background-image: repeating-radial-gradient(circle farthest-corner at center,
                                                #FFFFFF 30px, #00A3EF 60px);
}