Comments on: Cross-browser CSS gradients

By: Joe Moody

Joe Moody — Tue, 21 Dec 2010 16:15:02 +0000

Simply beautiful buttons, thank you!

By: Steve

Steve — Wed, 08 Dec 2010 14:45:34 +0000

Came across this GEM which worked great except under IE8 running ASP.NET 3.5. I kept getting the default style instead of the gradient. Found out that you need to add
the width: 100%; at the beginning and that fixed the problem. So all my browsers including IE8 are happy:))

.gradientV{
/* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */
/* and http://www.puremango.co.uk/2010/04/css-gradient/ */
width:100%;
/* fallback (Opera) */
background: #68A2D6;
/* Mozilla: */
background: -moz-linear-gradient(top, #F0F8FF, #68A2D6);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#F0F8FF), to(#68A2D6));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr=’#F0F8FF’, EndColorStr=’#68A2D6′, GradientType=0);
}

By: dreamincolor

dreamincolor — Mon, 01 Nov 2010 14:51:13 +0000

Internet Explorer gradient filter doesn’t support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.

Check this out: http://www.dreamincoloronline.com/css-gradient-for-all-browsers/

By: David Beesley

David Beesley — Tue, 19 Oct 2010 00:23:52 +0000

Excellent work fakedarren,
Your tips on Gradients, Border radius and hovers have really helped me in my day to day work.
And don’t worry, I have given you plenty of credit in my css

By: Elvis McNeely

Elvis McNeely — Sat, 11 Sep 2010 00:37:25 +0000

Wow! Thanks for the examples. It seems you can never know / learn everything about design and development… Thanks again!

By: Binyamin

Binyamin — Thu, 22 Jul 2010 18:01:36 +0000

It does not work on Opera browser (it does not support CSS background linear-gradient). Also add CSS border-radius: 5px; for Opera support.

By: fakedarren

fakedarren — Thu, 15 Apr 2010 00:08:09 +0000

@Mody: It require at least Safari 4, I just tested my example on both PC and mac and it’s fine. If you’re in Safari 4, double-check the order of declarations and your syntax – it’s really easy to get wrong

By: Mody

Mody — Wed, 14 Apr 2010 23:33:59 +0000

Hey this was so cool , But It isn’t taking effect with safari , any idea ?

By: CSS Gradient Background – Cross Browser! « puremango.co.uk

CSS Gradient Background – Cross Browser! « puremango.co.uk — Sat, 03 Apr 2010 02:16:50 +0000

[...] this little CSS gem to me, and now dear reader I pass it to you. It was orignally developed by FakeDarren, who posted a great little CSS button example. I find it useful for those times when designers get [...]

By: Howard Yeend

Howard Yeend — Thu, 01 Apr 2010 16:01:09 +0000

Nice! I’d completely forgotten about IE’s CSS Filters.