CSS3 Gradients in IE10 Platform Preview 1

IEBlog

Windows Internet Explorer Engineering Team Blog

CSS3 Gradients in IE10 Platform Preview 1

  • Comments 26

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
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.

Example of div formatted with "background-image: -ms-radial-gradient(yellow 0%, fuchsia 100%);"
div { background-image: -ms-radial-gradient(yellow 0%, fuchsia 100%); }
applied to all 3 <div>s

Altering the appearance of a site is easy. All the necessary changes only need to be made within the CSS stylesheet. Whereas using an external graphic resource will often require updating the external resource through a separate graphic editor, changing the color scheme of a site using CSS gradients doesn’t. CSS gradients give Web authors more flexibility and makes tweaking a site’s appearance less tedious. Especially with the advent of IE10’s more adaptable layout models such as CSS3 Grid Layout, Flexible Box Layout, and Multi-column Layout, the flexibility becomes more important.

The markup also tends to use less bandwidth. For instance, the markup of a simple two-color linear gradient with the -ms- vendor prefix is 38 bytes. Even when using four vendor prefixes and a non-prefixed version, the 198 bytes of markup is still less than the equivalent 215 byte gradient in a 1x100 PNG format. That doesn’t even count the markup to include the background image, and the assumption here is that a very small repeating graphic can be used. Additionally, a separate image file doesn’t need to be loaded, saving download time and bringing a speedier experience to your users.

How to Use CSS Gradients

Shape and color stops describe a CSS gradient. Gradients can contain multiple color stops, with an RGBA color and position specified for each one. CSS gradients are available in two flavors: linear gradients and radial gradients. As suggested by their names, they describe the shape of the gradient. Below are a couple examples of the markup for a linear and radial gradient, and the subsequent rendering in IE10 Platform Preview 1.

As can be seen with the linear gradient, the direction of the gradient line can be optionally specified either through keywords (top or bottom, left or right) or an angle, followed by a series of color stops. Each color stop requires a color and can optionally have a position specified as a distance along the gradient line. The generated linear gradient contains smooth color transitions between the color stops.

Example of div formatted with "background-image: -ms-linear-gradient(30deg, orange, yellow 50%, turquoise);"
background-image: -ms-linear-gradient(30deg, orange, yellow 50%, turquoise);

In a radial gradient, the position of the center of the gradient ellipse can be optionally specified using the same syntax as background-position. The shape (circle or ellipse) and size of the gradient can then be specified, either with keywords or lengths/percentages.

Example of div formatted with "background-image: -ms-radial-gradient(top center, circle cover, orange, yellow 25px, turquoise);"
background-image: -ms-radial-gradient(top center, circle cover, orange, yellow 25px, turquoise);

You can add support for CSS Gradients to take advantage of the faster load time and retained graphic fidelity, while continuing to provide users with an external background image or solid color for browsers that don’t support CSS Gradients. Simply make sure the CSS Gradient comes later in the cascade than the external image or solid color. This way, browsers that recognize the gradient syntax will use the CSS Gradient; browsers that don’t recognize it will ignore it and use the already-specified background.

{
    background: #FFFFFF;
    background-image: -ms-radial-gradient(top center, circle cover,
        orange, yellow 25px, turquoise);
}

Known Issues in IE10 PP1

IE10 Platform Preview 1 does not support color interpolation in the premultiplied alpha color space. This means that interpolation between rgba() color stops with different alpha values will appear less attractive than it otherwise should be. This is particularly noticeable with a black, alpha value 0, color stop. When transitioning to a transparent black color stop, the color transition will appear to fade to a black color before becoming transparent, instead of fading directly to more aesthetically pleasing transparent.

Gradient from orange to transparent black, rgba(0, 0, 0, 0), on a white background:

Example of div formatted with an orange to transparent black gradient in un-premultiplied color space.    Example of div formatted with an orange to transparent black gradient in premultiplied color space.
un-premultiplied color space    premultiplied color space

IE10 will support color interpolation in the premultiplied color space. This will become available in a future Platform Preview.

Additionally, support for CSS gradients in list-style-image and generated content will be available in IE10 and future preview. Also bear in mind that repeating gradients in Platform Preview 1—available using -ms-repeating-linear-gradient and -ms-repeating-radial-gradient in place of -ms-linear-gradient and -ms-radial-gradient—reflect the gradient instead of repeating it. This, too, will be fixed in IE10.

Interoperability Note for WebKit-based Browsers

At the time of writing, Safari 5.0.4 does not support the vendor-prefixed version of the CSS gradient syntax as described in the current W3C working draft. Webkit began with support for a vendor-prefixed version of a different syntax for CSS gradients; that is the version that Safari currently supports. Recently, however, Webkit added vendor-prefixed support for the standard version of the gradient syntax. Chrome, also based on the Webkit rendering engine, supports the W3C draft version of the syntax at this time (Chrome 10.0.648.204). While it is expected that Safari will adopt the standardized version of the gradient syntax, it is important to note that if you want Safari to display CSS gradients today, an additional gradient definition is needed.

Try It Out

Try out CSS3 Gradients in IE10 Platform Preview 1. We’d love to hear your feedback. You can play with our CSS Gradient Background Maker on the IE Test Drive site to get started and to generate interoperable markup.

Looking for a gradient solution for IE9? Try our SVG Gradient Background Maker to generate SVG-based CSS background images that work in IE9 and most other browsers today. By combining an SVG gradient background-image with a CSS gradients background-image, you can create markup that works in IE9 and current versions of all other browsers.

—Jennifer Yu, Program Manager, Internet Explorer Web Graphics

  • Loading...