Gradients in Internet Explorer 9

Question

Does anyone know the vendor prefix for gradients within IE9 or are we still supposed to still be using their proprietry filters   What I ve got for the other browsers is   background-image  -moz-linear-gradient top   444444   999999      FF3 6    background-image  -webkit-gradient linear left top left bottom color-stop 0   444444  color-stop 1   999999       Saf4   Chrome    filter   progid DXImageTransform Microsoft gradient startColorStr   444444   EndColorStr   999999       IE6 IE7    -ms-filter   progid DXImageTransform Microsoft gradient startColorStr   444444   EndColorStr   999999        IE8      As a bonus does anyone know Opera s vendor prefix as well

User · Answer

Not sure about IE9  but Opera doesn   t seem to have any gradient support yet    http   www opera com docs specs presto26  css   No occurrence of    gradient    on that page   There   s a great article by Robert Nyman on getting CSS gradients working in all browsers that aren   t Opera though    http   robertnyman com 2010 02 15 css-gradients-for-all-web-browsers-without-using-images    Not sure if that can be extended to use an image as a fallback

User · Answer

You still need to use their proprietary filters as of IE9 beta 1

User · Answer

The best cross-browser solution is  background   fff  background  -moz-linear-gradient  fff   000   background  -webkit-linear-gradient  fff   000   background  -o-linear-gradient  fff   000   background  -ms-linear-gradient  fff   000    For IE10   background  linear-gradient  fff   000   filter  progid DXImageTransform Microsoft gradient GradientType 0 startColorstr   ffffff   endColorstr   000000     For IE7-8-9    height  1    For IE7

User · Answer

IE9 currently lacks CSS3 gradient support  However  here is a nice workaround solution using PHP to return an SVG  vertical linear  gradient instead  which allows us to keep our design in our stylesheets    lt  php   from stop   isset   GET  from        GET  from      000000    to stop   isset   GET  to        GET  to      000000    header  Content-type  image svg xml  charset utf-8     echo   lt  xml version  1 0   gt        gt   lt svg xmlns  http   www w3 org 2000 svg  version  1 1  width  100   height  100   gt       lt defs gt           lt linearGradient id  linear-gradient  x1  0   y1  0   x2  0   y2  100   gt               lt stop offset  0   stop-color    lt  php echo  from stop    gt   stop-opacity  1   gt               lt stop offset  100   stop-color    lt  php echo  to stop    gt   stop-opacity  1   gt           lt  linearGradient gt       lt  defs gt       lt rect width  100   height  100   fill  url  linear-gradient    gt   lt  svg gt    Simply upload it to your server and call the URL like so   gradient php from f00 amp to 00f   This can be used in conjunction with your CSS3 gradients like this    my-color       background-color   f00      background-image  url gradient php from f00 amp to 00f       background-image  -webkit-gradient linear  left top  left bottom  from  f00   to  00f        background-image  -webkit-linear-gradient top   f00   00f       background-image  -moz-linear-gradient top   f00   00f       background-image  linear-gradient top   f00   00f       If you need to target below IE9  you can still use the old proprietary  filter  method    ie7  my-color   ie8  my-color       filter  progid DXImageTransform Microsoft Gradient startColorStr   ff0000   endColorStr   0000ff        Of course you can amend the PHP code to add more stops on the gradient  or make it more sophisticated  radial gradients  transparency etc   but this is great for those simple  vertical  linear gradients

User · Answer

I understand that IE9 still won t be supporting CSS gradients  Which is a shame  because it s supporting loads of other great new stuff   You might want to look into CSS3Pie as a way of getting all versions of IE to support various CSS3 features  including gradients  but also border-radius and box-shadow  with the minimum of fuss   I believe CSS3Pie works with IE9  I ve tried it on the pre-release versions  but not yet on the current beta

User · Answer

The code I use for all browser gradients   background   0A284B  background  -webkit-gradient linear  left top  left bottom  from  0A284B   to  135887    background  -webkit-linear-gradient  0A284B   135887   background  -moz-linear-gradient top   0A284B   135887   background  -ms-linear-gradient  0A284B   135887   background  -o-linear-gradient  0A284B   135887   background  linear-gradient  0A284B   135887   filter  progid DXImageTransform Microsoft gradient startColorstr   0A284B   endColorstr   135887    zoom  1    You will need to specify a height or zoom  1 to apply hasLayout to the element for this to work in IE     Update   Here is a LESS Mixin  CSS  version for all you LESS users out there    gradient  start   end        background  mix  start   end  50        filter    progid DXImageTransform Microsoft gradient startColorStr   start    EndColorStr   end          background  -webkit-gradient linear  left top  left bottom  from  start   to  end        background  -webkit-linear-gradient  start   end       background  -moz-linear-gradient top   start   end       background  -ms-linear-gradient  start   end       background  -o-linear-gradient  start   end       background  linear-gradient  start   end       zoom  1

User · Answer

Opera will soon start having builds available with gradient support  as well as other CSS features    The W3C CSS Working Group is not even finished with CSS 2 1  y all know that  right  We intend to be finished very soon  CSS3 is modularized precisely so we can move modules through to implementation faster rather than an entire spec   Every browser company uses a different software cycle methodology  testing  and so on  So the process takes time    I m sure many  many readers well know that if you re using anything in CSS3  you re doing what s called  progressive enhancement  - the browsers with the most support get the best experience  The other part of that is  graceful degradation  meaning the experience will be agreeable but perhaps not the best or most attractive until that browser has implemented the module  or parts of the module that are relevant to what you want to do   This creates quite an odd situation that unfortunately front-end devs get extremely frustrated by  inconsistent timing on implementations  So it s a real challenge on either side - do you blame the browser companies  the W3C  or worse yet - yourself  goodness knows we can t know it all   Do those of us who are working for a browser company and W3C group members blame ourselves  You    Of course not  It s always a game of balance  and as of yet  we ve not as an industry figured out where that point of balance really is  That s the joy of working in evolutionary technology

User · Answer

Looks like I m a little late to the party  but here s an example for some of the top browsers      IE10     background-image  -ms-linear-gradient top   444444 0    999999 100        Mozilla Firefox     background-image  -moz-linear-gradient top   444444 0    999999 100        Opera     background-image  -o-linear-gradient top   444444 0    999999 100        Webkit  Safari Chrome 10      background-image  -webkit-gradient linear  left top  left bottom  color-stop 0   444444   color-stop 1   999999        Webkit  Chrome 11       background-image  -webkit-linear-gradient top   444444 0    999999 100        Proposed W3C Markup     background-image  linear-gradient top   444444 0    999999 100      Source  http   ie microsoft com testdrive Graphics CSSGradientBackgroundMaker Default html  Note  all of these browsers also support rgb rgba in place of hexadecimal notation

User · Answer

Use an Gradient Generator - and everything will be perfect    http   www colorzilla com gradient-editor

User · Answer

As of version 11  Opera supports linear gradients with the -o- vendor prefix  Chris Mills wrote a Dev Opera article about it  http   dev opera com articles view css3-linear-gradients   Radial gradients are still in the works  both in the spec  and within Opera

[css] Gradients in Internet Explorer 9

Examples related to css

Examples related to background

Examples related to internet-explorer-9

Examples related to gradient