Unprefixed CSS3 Gradients in IE10

IE10 in the Windows 8 Release Preview supports the W3C Candidate Recommendation for CSS Gradients in their unprefixed form. IE10 also supports the older CSS Gradients syntax from the W3C Working Draft of 17 February 2011 behind the vendor prefix -ms-. Thisblog post describes the differences between the old and new syntax and behavior and provides some insight into the change.

Key Changes

Should you choose to simplify your CSS by making the move from vendor-prefixed CSS3 Gradients to unprefixed CSS3 Gradients, there are some key syntax changes tobe aware of. Many gradient generators have provided cross-browser markup, including markup for unprefixed gradients. In many cases, the unprefixed markup is nolonger valid according to the CSS Image Values W3C Candidate Recommendation that covers gradients.Here are the changes you should be aware of.

Linear and Repeating Linear Gradients

Working Draft Candidate Recommendation
Direction Keywords The top, bottom, left, and right keywords describe the gradient line’s direction via its starting point. The preposition “to” precedes the keywords top, bottom, left, and right keywords describe the gradientline’s direction via its ending point.
Example -ms-linear-gradient(top, orange, black); linear-gradient(to bottom, orange, black);
An example linear gradient going from orange on top to black on the bottom. An example linear gradient going from orange on top to black on the bottom.
Corner calculation Corner keywords specify a gradient line drawn from that corner to the opposite corner. Corner keywords are preceded by “to” and specify a gradient line beginning from the quadrant specified and ending in the opposite quadrant. The centerpoint of the gradient line intersects a line drawn between the remaining two corners.
Example -ms-linear-gradient(top left, fuchsia, yellow); linear-gradient(to bottom right, fuchsia, yellow);
Diagram showing how the angle associated with a corner-to-corner gradient was computed in the old working draft.
Diagram showing how the angle associated with a corner-to-corner gradient is computed in the new candidate recommendation.
Angle Direction 0deg is a gradient line pointing to the right. Angles increase in a counterclockwise direction. 0deg is a gradient line pointing to the top. Angles increase in a clockwise direction. Old angles can be converted to new angles using the formulanew = abs(old−450) mod 360
Diagram showing angles in the old working draft with zero degrees at the 3:00 location and positive degrees going counterclockwise. Diagram showing angles in the new candidate recommendation with zero degrees at the 12:00 location and positive degrees going clockwise.
Example -ms-linear-gradient(200deg, lime, magenta); linear-gradient(250deg, lime, magenta);
Example of an angled gradient with magenta in the lower left and lime in the upper right. Example of an angled gradient with magenta in the lower left and lime in the upper right.

Radial Gradients and Repeating Radial Gradients

Working Draft Candidate Recommendation
Position Position keywords or lengths describe the location of the center of the gradient. Position keywords or lengths are preceded by the preposition “at” to describe the location of the center of the gradient. The position is now specifiedafter gradient shape and size, if present.
Example -ms-radial-gradient(center, aqua, black); radial-gradient(at center, aqua, black);
Example of a radial gradient with aqua in the center and black in the corners. Example of a radial gradient with aqua in the center and black in the corners.
Size Keywords Gradient size is defined by one of the six keywords: farthest-corner, farthest-side, closest-corner, closest-side,contain, and cover. Gradient size is defined by one of the four keywords: farthest-corner, farthest-side, closest-corner, and closest-side.contain and cover are no longer valid and correspond to closest-side and farthest-corner, respectively.
Example -ms-radial-gradient(circle cover, lime, black); radial-gradient(circle farthest-corner, lime, black);
Example of a circular radial gradient with lime in the center and black in the corners sized so that the circle diameter matches the longer dimension. Example of a circular radial gradient with lime in the center and black in the corners sized so that the circle diameter matches the longer dimension.
Size and Shape Syntax Radial gradients specified with lengths must have both the horizontal and vertical radius lengths specified. Radial gradients may be specified with only a single radius length for circles.
Example -ms-radial-gradient(center, 50px 50px, red, black); radial-gradient(circle 50px at center, red, black);
Example of a 50px circular radial gradient with red in the center fading to black at the edge of the circle. The circle is centered in the containing rectangle. Example of a 50px circular radial gradient with red in the center fading to black at the edge of the circle. The circle is centered in the containing rectangle.


CSS3 Gradients are defined within the CSS Image Values and Replaced Content Module Level 3 W3C CandidateRecommendation. Gradients were first added to the specification in 2009. They were based on the gradients introduced in WebKit, but with improvements to the syntax. At that time, WebKit had an implementation for -webkit-gradient().The CSS Working Group iterated on the feature and altered its syntax. Radial gradients and linear gradients would be specified with separate property values, linear-gradient() and radial-gradient(). Fast forward a couple years and all majorbrowsers—Chrome, Firefox, IE10 Platform Preview 1, and Opera—had introduced support for the version of CSS gradients described in the W3C Working Draft of 17 February 2011.

When the Working Draft was closely scrutinized, several changed were suggested and after much discussion the specification was edited to reflect these changes.The major changes, listed in the table above, improved the old specification by addressing issues of clarity and consistency. For instance, in the old angle coordinatesystem, positive angles increased in a counterclockwise manner. This is in contrast to CSS Transforms and SVG Transforms, where positive angle rotations occur ina clockwise manner. With the specification change, angles that describe CSS gradients are now consistent across other CSS angles and increase in a clockwise manner.

In the process of changing gradients’ syntax, compatibility was a recognized concern despite the specification being in a Working Draft stage. Not all cases arecompatible, but much existing content will continue to work. Default values remain the same, so their rendering will be unchanged. For gradient-line direction,the required “to” preposition both adds clarity and changes the valid grammar. Existing content with unprefixed gradientsusing the old syntax will be invalid, thereby falling back on the vendor-prefixed version.

Update Your Unprefixed Gradients

Now that CSS3 Gradients are stable, we encourage you to update your gradients markup to the correct Candidate Recommendation unprefixed gradient syntax. The Internet Explorer 10 Guide for Developers includes full updated documentation of the unprefixed syntax. You mayalso remove instances of the -ms- prefixed gradients, as IE10 supports the unprefixed version. If you’re using cornerkeywords or angles to describe gradient direction, you may want to verify that your gradients still render as desired.

While vendor-prefixed gradients still work in IE10 and other browsers, adding correct support for unprefixed gradients future-proofs your content.

—Jennifer Yu, Program Manager, Internet Explorer

Comments (16)

  1. Trooper says:

    Thank you for the wonderful explanation.

    Please provide code-snippet for the gradient in Visual Studio 2012 with different vendor prefixes: aspnet.uservoice.com/…/2883098-code-snippet-for-linear-gradient-and-intellisense-

    Also, please improve the performance to the utmost level in IE10 once forever! Looks like Opera, Firefox, Safari and Chrome are giving no room for procrastination:

    connect.microsoft.com/…/v8-benchmark-and-ie10 and


  2. I just noticed that if an Enhanced Protected Mode is enabled, the Favorites section does not work (and not many extension).

    Favorites do not just work, can not be opened, and if you press to open the entire Tab Group > it will open blank tabs… Why is that? 😐

  3. Sam says:

    Wow. The W3C managed to make every gradient expression worse between the working draft and recommendation stages. I understand the prepositions make the gradients more humanly readable, but CSS already has many properties that are not humanly readable. To start now is just purely inconsistent.

  4. "to" does not make any sense, either shorten all or none, ridiculous

  5. Yes it seems perfectly great!!!! I like non-prefix properties so that I wouldn't suffer from too many prefixes!!!!

  6. Xero says:

    @Trooper, I guess all FOUR tests in those THREE bug reports are depending on one thing: IE performs poorly when "live DOM" is updated frequently. As a workaround, the DocumentFragment can be used to mitigate the difference. For a permanent fix, IE team should redesign the way of dealing with live DOM.

  7. Martijn says:

    Microsoft, I've asked you this before, but can you PLEASE stop doing things the way noone else does them? For pete's sake

    What you think you're implementing as a "standard" is actually a Candidate Recommendation, and is therefor subject to change. Implementng that is generally a BAD idea.

    Just go with the prefix notation. Many developers already use the -ms- prefix in gradients, because it works on IE10-CP, and will now be broken in IE10-RP onwards, because you've implemented a standard that is broken by design and is subject to change.

  8. @Martijn says:

    Actually implementing a candidate recommendation is good.  It is a phase right at the end of the standardization proces

    Candidate recommmendations are rarely subject to breaking changes.

    This article shows however that implementing a draft version without pre-fixing is actually very bad.

  9. Prior Semblance says:

    I'm sure that gradients will be pretty much set in stone by the time IE10 comes out and they wouldn't have done this if they thought there was any chance of it changing. But if by some random chance they do change something there is still time to fix it before IE10 is done.

  10. @Sam says:

    I can't agree more, the "to bottom" just looks dumb when compared to other css properties, I can't think of any css property off the top of my head that uses spaces in it like that.  The bottom was pretty easy to remember, matched existing css and as a bonus it was slightly shorter so it would cut off a few bytes from your css file =p

  11. Jared says:

    Looks good to me. I'm assuming now we're going to have to wait for Win8 for IE 10? We're getting pretty eager here, IE9 is getting pretty long in the tooth compared to the competition. Good stuff with being standard compliant.

  12. pmbAustin says:

    It's vital you support "Favorites" in both IE10-Metro adn IE10-Desktop.  And IE10-WP8

    And it's vital you support syncing of bookmarks across platforms.

    I don't expect "pinned" sites to sync, to be honest.  They're custom start page configurations, designed to be unique to each experience. But Bookmarks/favorites need to be synced.  If I see a site on my Windows Phone and book mark it, I should be able to pick it up later on my WinRT Surface tablet, and/or on my Win8 Desktop.

    These things need to work seamlessly together, all linked by my Microsoft Account.

    Without "Favorites"/Bookmarks in IE10-Metro, it breaks integration and ease of use, it breaks "fast and fluid", it breaks "it just works".

  13. Dale says:

    @pmbAustin – although I agree that Metro IE10 should have full bookmarking capabilities I think syncing across devices is a huge stretch.

    99.9% of the population doesn't have (nor wants) a Windows Phone and since (decent) Windows Tablets don't exist for retail purchase yet syncing between 1 PC and nothing else seems like a big engineering en-devour for zero benefit.

    The bigger issue at the moment of course is that Microsoft has yet to respond to all the issues with their "Flash Censorship Program" in Metro IE10: blogs.msdn.com/…/developer-guidance-for-web-sites-with-flash-content-in-windows-8.aspx

    Having flash support is an all or nothing project.  The current opt-in process for developers is completely backwards and in Microsoft's most critical market (business & enterprise) no developers can actually submit a request (due to private & protected secure content) and thus the whole scheme is an epic fail as well as an insult to business and developers.

    Thus until there is a response explaining that they are ditching the idea (or massively re-vamping in to a user defined opt-out blacklist) there is no point in talking about CSS gradients or bookmarks.

  14. Patrick says:

    I've posted a comment on the previous blog post about the mass hysteria from developers over the insane suggested Microsoft authoritative CV list for whitelisting flash content in Windows 8.

    My Comment:


    Beyond the numerous developers and business users that have posted several flaws in this censored flash content plan Microsoft has failed to respond to any of them.  You're doing yourself a huge dis-favor by not responding and putting our fears to rest that you are about to publish an un-usable browser due to an ill-designed feature.

    Please respond ASAP and help developers understand that this mistake was just a design intention… that has not been commited to the code base and as such can easily be yanked out now that it has been seen to be a complete failure in the light of day.

  15. pmbAustin says:

    @Dale, there's already bookmark/favorites syncing with Windows Live Mesh.  And I thought it was supposed to be there if you sign-on with Windows Live ID (one of the many things that gets synced)… which is great for desktop, but kinda pointless if it excludes IE10-Metro and WP8.

    And having bookmarks sync between WP8 and Win8 is a great selling point… not to mention that Chrome is doing this between Android and Chrome on the desktop.  Come on, it's what the whole CLOUD thing is about… keeping all your devices in sync, and all your data (including bookmarks) accesible from anywhere!

    So I don't think it's a "stretch".  I think it's becoming absolutely necessary base functionality.

    And I don't disagree with you on the Flash thing.  It's one thing to ship a hobbled sub-set of Flash in IE10-Metro to facilitate some scenarios.  Fine.  The "opt in" thing?  Silly and unworkable.  And forcing the Desktop to share the same "built in" version just breaks IE10-Desktop, and doesn't all you to keep up to date, or use an older version if that's what's more compatable with your sites (current IE10 Flash won't play most online flash videos that I've seen all over the web… and there's no way to update it or revert to the previous version which worked in Desktop IE).  But I do think that bookmarks are every bit as important, because (at least to me) the lack of them renders IE10-Metro even more useless.