CSS3 Gradients in IE10 Platform Preview 1

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

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 src="http://ie.microsoft.com/testdrive/ieblog/2011/May/04_CSS3GradientsinIE10PlatformPreview1_1.png" />
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 1×100 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

Example of div formatted with "background-image: -ms-linear-gradient(30deg, orange, yellow 50%, turquoise);" src="http://ie.microsoft.com/testdrive/ieblog/2011/May/04_CSS3GradientsinIE10PlatformPreview1_3.png" />
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);" src="http://ie.microsoft.com/testdrive/ieblog/2011/May/04_CSS3GradientsinIE10PlatformPreview1_4.png" />
background-image: -ms-radial-gradient(top center, circle cover, orange, yellow 25px,

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: #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
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

Comments (26)

  1. David Greensmith says:

    This looks very interesting, I will look forward to giving it a go in the future. May be useful for my website http://www.davidgreensmith.co.uk

  2. carlos says:

    I don't understand why you mention webkit in a IE blog post: do you have any plans to switch to webkit as alternative rendering engine for IE? ( this is a long awaited feature ).

    Thanks for your feedback

  3. Richard says:

    Maybe I'm missing something, but isn't the first orange example how it should work?  If you have a color stop of black even if it's fully transparent, shouldn't the gradient fade through black?  If you actually wanted the result in the first example but in the premultiplied space, how would you do it?

  4. sirshannon says:

    Will these gradients work correctly with rounded corners?  In IE9, if an element has rounded corners and a gradient, the gradient acts as if the corners are square and thus extends beyond the rounded corners.

  5. ieblog says:

    @sirshannon: Yes, the IE10 implementation of this feature will work correctly with rounded corners. The IE9 capability you're referring to is the legacy IE-specific -ms-filter property.

  6. MIguel WebDeveloper says:

    great… good job

  7. Matthew says:

    Nice stuff.

  8. blah says:

    Agree with Richard. The left orange gradient is doing exactly what rgba(0,0,0,0) intuitively says it should do.

  9. Malcolm says:

    Great but appears to be nothing but the tip of the iceberg as far as IE goes. My question has to be why do Firefox, Opera and Chrome all render my own site without difficulty and yet IE appears to need tweaks and tricks to work properly?

    It's the same for rounded corners and shading http://www.ukmobile247.co.uk

  10. Premultiplied says:

    For those wanting more information about the color interpolation, please refer to the second green paragraph here:


  11. Alec says:

    Very cool to see that IE10 will support CSS3 gradients. I hope support for text-shadow is somewhere in the development pipeline. 🙂

  12. Jon says:

    Good work as always! Is there any chance of a post about the other CSS features you have planned for 10? I'm really hoping for text-shadow and border-image.

  13. Ooh says:

    @Premultiplied: Thanks for the link. Although I have to admit that I don't really get the reasoning behind it. Sure, for fully transparent colors this is cool, but for semi-transparent ones it is VERY unintuitive. Hopefully the spec will be changed to not using premultiplied colors.

  14. Superman says:

    Hey guys, have ever head of modern, standards compliant browsers? FireFox, Chrome, Safari, Opera – just to name a few. Gradients are nothing new at all… IE is seriously lagging behind

  15. Jens Grochtdreis says:

    "We are extremely excited" means in Microsoft-speech "finally our programmers managed to get the same thing done as the real browsers do for years".

    Please do deliver once and for all a really good browser, one that even works on XP. And please do a better job to convince all your big customers to abandon all your old browsers up to version 8.

    And please: no more useless marketing-driven postings. You donÄt do any good for your bad reputation as a "browser"-manufacturer.

  16. Take out active X says:


  17. Windows 7 user says:

    Hello Internet Explorer Team! I'm sad to say this but.. You guys hardly don't listen.. This is true! Apple company does listen… I might switch from windows 7 to Mac os x 🙁  

  18. Aethec says:

    I'm amazed at how many people here have so much free time they can spend it by trolling and saying stupid things.

    I wish WPF used that premultiplied thing though 🙁

  19. @Windows 7 user says:

    You do realize that "hardly don't listen" is another way of saying "do listen most of the time" right?

  20. Neil Dunensach says:

    It's time to make these forums login only, I think.

  21. Liam says:

    Why is this not being put into IE9?

  22. Prior Semblance says:


    Because IE9 already came out and this feature still isn't ready for widespread use?

  23. Jamie says:

    >Yes, the IE10 implementation of this feature will work correctly with rounded corners.

    Thank the heavens above. and this should have been released in in 9, along with text-shadow. One more headache will be gone, how many are left? Better super late than never.

  24. Jamie says:

    >this feature still isn't ready for widespread use

    How do you figure that? I use this all the time. The only users who get a degraded version are IE users. Do I care? Not really. They still get a plain non rounded corner solid color box. Upgrade, or you get what you get.

  25. Nicholas says:

    Thanks for the article. I'm curious of the interplay between -ms-filter and -ms-linear-gradient/-ms-radial-gradient. Are you going to disable the gradient filter if a CSS gradient is being used? I'm thinking of the case where I'd like to use the same style sheet in IE9 and IE10, where I have something like:

    .foo {

       -ms-filter: "<gradient>"

       background-image: -ms-linear-gradient(<gradient>);


    Will these play well together?

  26. ieblog says:

    @Nicholas: Good question. No, these won't play well together. It's not a good idea to use -ms-filter markup with new IE9 or IE10 features.