Hi there,

I have a page where the viewer can change the background of the window--(actually a div, #bigbg, above the html background)--by removing and adding a class, eg,

.gradblk {background: linear-gradient(#000000, #36393C, #909396); background-attachment:fixed; }

with

function showBg(grad) {  $('#bigbg').removeClass().addClass(grad); }

There's a choice of six colour gradients.

The viewer also has the option of varying the opacity of the new background with a choice of five levels: function opBg(n) {  $('#bigbg').css('opacity', '0.' + n) } .

Instead of varying opacity, it would be preferable to vary saturation. The usual method seems to be to create a class for the desired level of saturation, eg  .halfsat { filter: saturate(.5) }

and then applying thIs with removeClass().addClass().

If my logic's correct, this would mean creating five combined colour-gradient+opacity classes for each of the six colour gradients.

A function to change saturation would be good, something like

      function satBg(n) {  $('#bigbg').css( filter:saturate(n) )  }

--but, depending on where I put the apostrophe marks, I either get error messages, or else it runs but does nothing. 

Any ideas? ( I don't want a color picker, too many choices).

Cheers...