Question

I try to create a transparent gradient with CSS. I need it for a color picker app. I have a transparent PNG I could use but its is 20kb large and would request a new HTTP request. The code should be ultralight.

Here is what I’ve done so far:
http://jsfiddle.net/78SEK/
The one above its the good one and the bottom one is made with CSS.

I had also tryd something with HTML5 Canvas but I could not get the exact match.
Is there a way I could do this?
Thanx

Answer 1

You only need 2 gradients. One going from white to transparent left to right, and one going from transparent to black top to bottom:

http://jsfiddle.net/SKFRS/

HTML:

<div id="white_grad"><div id="black_grad"></div></div>
<p>CSS3 Gradient</p>

CSS:

#white_grad {
    background:-moz-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) repeat scroll 0 0 transparent;
    height:255px;
    width:255px;
}

#black_grad {
    background:-moz-linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)) repeat scroll 0 0 transparent;
    border:1px solid #333333;
    height:255px;
    width:255px;
}

You could also make the bottom gradient go from black to your desired color, not transparent. Then your background could be any color, and your div would still have the desired effect:

http://jsfiddle.net/SKFRS/3/

If you want to programatically change it, the first method is probably better, with a bottom solid background layer.