Take the 2-minute tour ×

I want to try and get a cross browser gradient effect working with rgb values with fall backs in case the browser doesn't support it.

jsFiddle example: http://jsfiddle.net/HelloJoe/hUxdh/

I believe I've covered the majority of browsers, but I have a few questions:

  1. Are there any other browsers that I have missed which are commonly used, as well as what properties would be needed for devices such as iPads/SmartPhones, or would they render from one of the currently used properties?

  2. If by chance the gradient isn't rendered, is having the original background: rgb(50, 50, 50); enough to generate just a solid colour?

  3. With the filter value, I couldn't get it working by using rgb values and had to resort to using a hex value instead, not that this is a huge problem, but I'm trying to only use rgb values. Is there a way round this or does it just not accept them?

  4. If I was to use rgba instead of rgb would I then need to have a rgba gradient background value, an rgb gradient background value as a fall back for not rendering the alpha transparency and then a solid background fall back in case no gradient was rendered at all? Or would the browser ignore the alpha transparency value and just display the rgb from the rgba without a separate rgb background fall back?

  5. As a final fall back for everything, would having a set hex value at the start of the CSS properties be needed? I guess there is no harm is adding a hex value but the idea of using rgb is if rgba is usable it makes for a quick and easy colour change throughout the site. So having a fall back hex value would make using rgb/rgba pointless for what I'm intending it's used for since I'd need to go through and edit all hex values anyway.

I've done a bit of searching and examples vary, understanding is misinterpreted between different people and I was just try to create an accurate working example of getting the desired outcome.

share|improve this question

1 Answer 1

up vote 6 down vote accepted

May i suggest you this website to help you with your Gradients and fallback:

share|improve this answer
That is definitely an amazing generator, thank you very much Simon! A couple questions still stand though such as if a browser doesn't read rgba does it just read the rgb value and ignore the alpha transparency? Also is a hex value ever needed as an ultimate fall back? –  Joe Sep 11 '11 at 19:14
@JoeMottershaw My love for Colorzilla's Ultimate gradient editor cant be measured so (+1), but as the case might be that you want to use other things like rounded corner and shadow I'm just gonna throw in css3pie.com - Note that the website itself is a demo of how the shadows and rounded corners work in it. –  Joonas Sep 29 '11 at 11:00

Your Answer


