Because it’s one property named filter, every time you want to add a style to it you override it.
CSS version 1
Fortunately you can add multiple styles in some properties like background-image and filter! To get this working you’ll have to put all the filter styles in one space separated filter property.
.grayscale.blur {
filter: blur(5px) grayscale(1);
}
CSS version 2
An alternative, flexible, solution would be to create a “div soup” on purpose and set different filters in the html stack. e.g.
<div class='demo__blurwrap' style='filter: blur(5px);'>
<div class="demo__graywrap" style='filter: grayscale(1);'>
<img src="awesome_image.jpeg" alt="">
</div>
</div>
CSS version 3
edit: just realised I just wrote this version with transforms, but the same idea applies.
Yet another solution is CSS vars. I wouldn’t say it’s ideal but it’s a nice experiment. The major downside is that you need to declare a lot of variables, have default long rules for transform and nested transforms will definitely break.
Javascript
Lastly, if you were to use JavaScript to render the styles you can read the current applied filters using getComputedStyle and add more to the mix.
- Modern browser demo setting styles nicely
- Modern browser demo setting styles without respect and fix it with observers
And a relevant article – this is more for animations and not yet supported by many browsers: Additive animations
And another relevant article on css-tricks: Houdini