3

I would like to know if it's possible to generate a mask of saturation+brightness that are used in color pickers for instance (something like http://johndyer.name/lab/colorpicker/refresh_web/colorpicker/images/map-hue.png) but using only linear-gradient in css3 ? I tried severals things, such as :

background: linear-gradient(to right, hsla(0,100%,0,0) 0%, hsla(0,0%,0%,.5) 100%), /* saturation mask */
            linear-gradient(to top, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%), /* lightness mask */

but I can't make something like the picture, can't find the right combinaison, and because I don't fully understand, I don't know if it's possible.

Thanks

Stéphane. D.
  • 181
  • 2
  • 9

2 Answers2

0

It is maybe the way you write it.

  1. for the image, 1 gradient + a background-color will do.
  2. you did not close correctly you rules , one value is still expected 100%) , /* li :)
  3. this could be it : 
ele {
background: 
    linear-gradient(0deg, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%) no-repeat left ,
    white   linear-gradient(180deg, hsla(0,0%,0%,.5) 0%, hsla(0,0%,100%,.5) 100%) no-repeat right;
    background-size:95% 100%, 5% 100%;
}

http://codepen.io/anon/pen/ubDsr (gradient covers body)

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
0

You had your gradients reversed and some incorrect hsla values. Just use hex notation, it's easier in this case:

background-image:
  linear-gradient(to top, #000 0%, transparent 100%),   /* lightness*/
  linear-gradient(to right, #fff 0%, transparent 100%); /* saturation */

Here's a demo where you can compare the result with an image-based solution (normal = gradients, hover = Bootstrap Colorpicker).

nice ass
  • 16,471
  • 7
  • 50
  • 89