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

Question

hi! :) 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.

Answer 1

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).

Answer 2

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.

Answer 3

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.