How to add multi-value (comma separated) box-shadow using jQuery (.css)?

Question

I have a box-shadow in my css as:

.className {

  transform: translateY(0);
  box-shadow:
    inset 0 0 60px whitesmoke,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;
}

I would like to apply this shadow using jQuery INSTEAD (so I can later implement dynamic colors). My current javascript is:

$('.className').css({
            "box-shadow": 'inset 0 0 60px whitesmoke'
            })

Which applies one side of the shadow with no issues. When I try to add the other shadows separated by commas in css, nothing happens. I tried adding all the comma values on one line as follows:

$('.className').css({
            "box-shadow": 'inset 0 0 60px whitesmoke, inset 20px 0 80px #f0f,...'
            })

But that didn't work. I also tried using spaced instead of commas and that also didn't work. Is there any way to convert this multi-comma value shadow box into one parameter that can be accepted by jQuery's .css?

If not... how can I convert the css into an acceptable format to be passed into jQuery's .css method?

Thanks.

Answer 1

Must have made a syntax error as it works fine with the comma approach. See Temani's fiddle: jsfiddle.net/autq9p13

Thanks.