Question

I am building a color picker that uses CSS gradients instead on images. I have a CSS gradient that works for HSB color selection but I am unable to create a CSS gradient for HSB color selection. You can see the original gradient at:
http://jsfiddle.net/qVsFN/

Gradient 1 should look like gradient 2. Is it possible to do this with only css? I tryed several things including radial gradients with no luck.

Here is the css and markup I am using:

#red_grad {
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 0, 0, 1)) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, left center, right center, from(rgba(255, 255, 255, 1)), to(rgba(255, 0, 0, 1)));
    height: 262px;
    width: 262px;
}
#black_grad {
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 1), transparent) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, center bottom, center top, from(rgba(0, 0, 0, 1)), to(transparent)) repeat scroll 0 0 transparent;
    height: 262px;
    width: 262px;
}

<div id="red_grad">
    <div id="black_grad">
    </div>
</div>

You can see it live at http://jsfiddle.net/qVsFN/

Answer 1

The HSL Saturation-Lightness plane can be made with 2 linear gradients:

1. Lightness: White to transparent to black (the horizontal gradient)
2. Saturation: Fully saturated color to gray (#808080) (the vertial gradient)

Here’s a fiddle with it: http://jsfiddle.net/leaverou/qVsFN/3/

Notes:

• What you got wrong on the first one and confused you is that you thought you’re limited to only 2 color stops per gradient. As you can see, they’re more flexible than that 🙂
• Why 4 color stops instead of 3 for the Lightness gradient? Because transparent is actually mapped to rgba(0,0,0,0) so a transparent to white gradient is not what you expect.
• You don’t need 2 elements in CSS3, you can have multiple backgrounds in just one image, so I removed the extra element. 😉

And what about changing the hue? Just substitute red for the fully saturated version of the new color (Hue = whatever, sat = 100, lightness = 50) — and there’s your color picker!