How to separate the different properties of filter in css?

Issue

I am making a monopoly board in which each block is an element. I need to make the blocks dull and bright based on different conditions. To change brightness I use filter property. The brightness will be changed dynamically so I need to change style.filter.

Now there are other properties like 'drop-shadow' which I want to be constant and I have used them in css file. But now the problem is that these both filters can’t exist in one time. Is there any way to combine both style.filter and filter property in css.

document.querySelector('#test').style.filter = 'brightness(0.5)'
div{
  height:100px;
  width:100px;
  border:2px solid;
  background:orange;
  filter:drop-shadow(2px 4px 6px black);
  
}
<div id="test"></div>

In the above script I need to show both brightness and drop-shadow but only brightness is working.

Note: In the example I just told about two properties but in my real code there are more. I know this can be solved by creating a constant string for css properties and then each time concat it to style.filter. But I don’t want that.

Solution

Use CSS variables:

document.querySelector('#test').style.setProperty("--b", "0.2");
div#test{
  height:100px;
  width:100px;
  border:2px solid;
  background:orange;
  filter:drop-shadow(2px 4px 6px black) brightness(var(--b,1)) blur(2px);
  
}
<div id="test"></div>

Answered By – Temani Afif

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published