How to change inner box-shadow color with jquery or somehow?


I would like to change the box-shadow color as a result of the value I am getting from a database.

basically what I am doing is:

if (dbValue==1)
      $('.myDivClass').css("box-shadow","0px 0px 30px #333333");
 $('.myDivClass').css("box-shadow","0px 0px 30px #999999");

for the browser support I should set this value for -webkit -moz as well.

I think this is not supported and also it needs to have the inset value somewhere to make it inner box shadow.

I have searched for jquery plugins as well and I found out the boxShadow method which only changes outside shadow color. Is there any way of doing this? Am I missing something. What I can do I think is to create different css classes with different inner box-shadow's and with jquery I can add and delete the class into a div to change the box-shadow. this seems to me an alternative way of doing it but I want to make sure that if there is no way of changing the color of

box-shadow: inset 0px 0px 20px #257d0d;

this box-shadow directly?

Problem courtesy of: akd


You should probably just add a class to the element instead.


.boxShadow {
-webkit-box-shadow: inset 0px 0px 30px #333333;
-moz-box-shadow: inset 0px 0px 30px #333333;
box-shadow: inset 0px 0px 30px #333333;
.boxShadow2 {
-webkit-box-shadow: inset 0px 0px 30px #999999;
-moz-box-shadow: inset 0px 0px 30px #999999;
box-shadow: inset 0px 0px 30px #999999;


if (dbValue==1)
      $('.myDivClass').removeClass('boxShadow boxShadow2').addClass('boxShadow');
 $('.myDivClass').removeClass('boxShadow boxShadow2').addClass('boxShadow2');

As you can see I made the box shadow inset for you also if you wanted it to be an inset box shadow.

Hope this helps.

Edit: I edited my code to remove each class before a new one is added just in case someone needs it someday...

Solution courtesy of: Nathan


    .boxShadow {
    -webkit-box-shadow: inset 0px 0px 30px rgba(1,2,3,0);
    -moz-box-shadow: inset 0px 0px 30px rgba(1,2,3,0);
    box-shadow: inset 0px 0px 30px rgba(1,2,3,0);


i use reg-ex because in some browsers one color can be returned using different format for example transparent is returned in chrome as rgba(0,0,0,0)

Discussion courtesy of: Safareli

This recipe can be found in it's original form on Stack Over Flow.