We are extremely excited to be able to provide vendor-prefixed support of CSS3 Gradients in Internet Explorer 10 Platform Preview 1! CSS3 Gradients comes from a subsection of the CSS3 Image Values and Replaced Content specification, which is still in Working Draft status. Using CSS markup, a gradient image is generated by the browser and can be rendered where CSS images are permitted. In Platform Preview 1, CSS3 gradients can be used as a background-image.

Why use CSS Gradients?

Gradients are popular among Web developers for creating aesthetically pleasing sites. They’re often used as a way to create a sense of depth or to add a splash of color. Backgrounds of text and menus are common places where subtle gradients can be found.

A few simple examples of subtle gradients used in the backgrounds of sites and menus

The most common way to achieve a gradient effect today is by using a raster image where the gradient is desired. With CSS Gradients, a Web author doesn’t need to create a separate image for the gradient. CSS Gradients enable CSS markup to describe and generate a gradient image that transitions color seamlessly. Just like solid-colored backgrounds, the gradient background can be specified entirely in CSS. On top of that, the generated gradient image can depend on the size of the container to which it is applied. For instance, specifying a radial gradient that spans the background of the <div> element is simple even as the size of the <div> changes. Using percent units, a single line of CSS markup is sufficient to apply a gradient to multiple <div>s of different sizes. When raster images are used to display gradients, the gradient’s fidelity can be lost when it needs to be resized. This is common for gradients used in conjunction with the background-size property or when rendering on different devices where zoom is a frequent action.