Skip to main content

Fix Background Gradient Color Difference between Browsers

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

Cross Browser Fix for Background Gradient Colors. While developing I noticed a major colour difference between FireFox 12 and Chrome Canary 21. This is obviously something to do with the way CSS3 is rendered through the different browsers.

color-difference-much-firefox-chrome-canary

CSS Before

background-image: -moz-linear-gradient(top, #5CB6F2, #FFF);
background-image: -webkit-gradient(linear, left top, left bottom, from(#0ae), to(#fff));
background-image: -webkit-linear-gradient(top, #0ea, white);

CSS After

background: #FFFFFF; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CB6F2', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#5CB6F2), to(#FFF)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #5CB6F2,  #FFF); /* for firefox 3.6+ */

All Fixed! :)

color-difference-much-firefox-chrome-canary2

Just out of interest, here is what it looks like in Internet Explorer 9.

color-difference-much-ie9

Related Articles

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn the basics of programming with the web's most popular language - JavaScript


A practical guide to leading radical innovation and growth.

Integromat Tower Ad