How can I display a CSS linear gradient in Netscape?

Question

How do I use a CSS linear gradient with Netscape?

I am trying this code:

#gr {
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000));
    background: -moz-linear-gradient(top,  #ffffff,  #000);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000');
    -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000'); 
}

It works with IE, Firefox, and Chrome but it does not work with Netscape.

Answer 1

Netscape Navigator 9, last updated between 2006 and 2008 as a Firefox derivative, does not offer any real support for CSS beyond a large subset of the CSS2.1 spec. It does not support CSS3 gradients, or most any other CSS3 feature.

Netscape Navigator/Communicator 4.x and older don't have a lot of CSS support at all.

If you really need a gradient, you're better off using a background image. That's the traditional, tried and tested method designers have been using for the past 10 years, with great cross-browser compatibility yet very little friction.

If you're trying to support Netscape only because you are a Netscape user, stop wasting your time. Switch to Firefox. No serious web designer uses Netscape anymore in this day and age.

Answer 2

Netscape is no longer supported and is very rarely used by anyone.

But if you still want to use a linear gradient on your site, you can create an image using Photoshop or any other graphic editor, and then use it as:

background-image: url('url-of-img.jpg');