how can we use and control Gradient

Question

i use this as a background bar ... repeated of course

http://www.freeimagehosting.net/uploads/3c2f75b680.gif

and i want to replace that with simple CSS Gradient color without image ...so i searched all over the internet and i found this:

 filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff' ,startColorstr='#000000'  , gradientType='0');

, but this is not enough .. then i searched in StackOverFlow.com and i found this ,very close to my question..

first i opened this , but the examples didn't show any gradient with me(it appears just text .. and there is no gradient)...

then i opened this, and i have been trying this:

linear-gradient(top, yellow, blue 20%, #0f0);

on div:

<div style="width: 633px; height: 268px; background:linear-gradient(top, yellow, blue 20%, #0f0);">
</div>

didn't work also...

1. i check out the photoshop and i sow somethign in gradient called "Opacity Midpoint".. is it avalible in CSS .. if it is , how to use it?

2. in filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff' ,startColorstr='#000000' , gradientType='0'); how to put a limit for the startColorstr?

3. how to use linear-gradient(top, yellow, blue 20%, #0f0); and radial-gradient(bottom left, farthest-side, red, yellow 50px, green); in CSS?

*note:*one simple good answer would be OK , but i would like to know all of these ... thanks

Answer 1

The difficulty is that there isn't a reliable, cross-browser way to do gradients without an image as of yet.

• the filter only works in IE
• There's -webkit-gradient which only works in some browsers
• There's also the new <svg> tag which, again doesn't have any sort of consistent implementation.

If you're still really set on this, the only other choice is to generate them using javascript (see this site for an example).

Answer 2

Well, first, the filter property is available in Internet Explorer only. It won't work in any other browser.

Then there is no CSS standard that specifies gradients; there is a working draft that is part of CSS 3 but it's far from complete and thus the functions linear-gradient and radial-gradient are not yet widely available and may be subject to radical changes anyway.

And WebKit did entirely its own thing, apart from everyone else.

That's the current state concerning gradients in CSS and even if browser vendors implement the CSS working draft, the property and function names will be prefixed with -moz- or -webkit-, etc. They are not meant to be used freely on the web, actually. It's more a tech preview of what might come but things might very well change and the final property/function is named differently anyway (without the prefix).

If you need parametrized gradients, then probably your best bet is to write a script which creates them according to several arguments.