Tutorial :How to create gradient background with CSS in Firefox < 3.6?


anyone know if is possible to reproduce this effect

background-image: -moz-linear-gradient(top, #666666, #000000);  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #666666));  

also on ff < 3.6? im tryin' to generate a gradient background without images!

thanks a lot in advance for any advice.


Doesn't seem that way: MDC Reference

Introduced in Gecko 1.9.2

(Firefox 3.6 / Fennec 1.0)

Scroll down in the document for info on how to do this on other browsers. Surprisingly, IE can do this since 5.5 (with a proprietary tag, of course).


According to this, FF <3.6 doesn't support linear gradients in CSS, I suggest you go with images. SVG might come in handy, but I'm really not sure on the browser support for that.


According to https://developer.mozilla.org/en/CSS/-moz-linear-gradient -moz-linear-gradient was introduced in Firefox 3.6, so the answer is â€" no, older versions of Firefox can’t do it.

Note â€" if user is savvy enough to use Firefox in the first place he very likely is using the latest version.

If you want to read more about cross-browser compatible CSS gradient check out this post.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »