How to get Linear gradient effect on mozilla firefox

Question

I am using the following css to get the linear gradient effect, But its not working in mozilla firefox, Can anyone of you know it pls help to get the same effect in firefox also

Answer 1

I always use this editor for gradients. A nice visual editor for gradients with css code output. The created code supports every major browser and provides a fallback for older Internet Explorer.

Answer 2

-moz-linear-gradient(center top, #000, #fff);

That's the format.

Answer 3

Firstly, when using any CSS feature with a prefix like -webkit-, you should always also specify the same feature without the prefixed as well.

The prefix indicates that it is (or was) an experimental feature which a particular browser supports, but which may still be in development or may not be standardised yet.

When a feature is standardised, newer versions of the browser will drop the prefix, which is why you should always use the un-prefixed version of the style as well.

In the case of gradients, the syntax has been standardised for some time, so with current versions of virtually all the major browsers, you can use it without a prefix like so:

background: linear-gradient(to top, rgba(0, 0, 0, .65) 0, transparent);

That should work just fine in the lastest version of all the main browsers, including Firefox and including Chrome.

So if you just want to support current browser versions, you don't even need the -webkit- prefix at all.

However, that's not always realistic, because you probably need to support older versions of some browsers.

In that case it helps to know which browser versions require a prefix, to help you decide whether to support them by providing the prefixed version of the style (because if you support them all it can be a lot of repetition in the CSS code with all those prefixes).

So, for example, a lot of Safari users might not be on the latest version, which means that they will need the -webkit- prefix. Or you might want to support Android devices, which also still need it.

But the good news is that Firefox hasn't needed a prefix for this feature for a long time, so you can safely drop the -moz- prefix.

A good place to find out about this sort of thing is at CanIUse.com, which gives exact details about historic browser support for a load of browser features.

Hope that helps.

Answer 4

Use -moz-linear-gradient:

background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .65) 0,transparent);

Running demo

And the W3C version with a slightly different syntax:

background-image: linear-gradient(to top, rgba(0, 0, 0, .65) 0, transparent);

Running demo

You should always use vendor specific prefixes (-o, -moz, and so on) before the W3C one. To prevent writing them by yourself, you can use a compile-time prefixer, like Nettus+ Prefixr, or a real-time prefixer, like Lea Verou's Prefix free.

In the specific case of Gradients, you can use this great Gradient Generator that prefixes them for you.