JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo">
  
</div>
<button class="toggleGrayscale">
  Grayscale
</button>
<button class="toggleBlur">
  Blur
</button>

CSS

.demo {
  background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
  width: 100px;
  height: 100px;;
}

JavaScript

let qs = q => document.querySelector(q);
let toggleGrayscale = qs('.toggleGrayscale');
let toggleBlur = qs('.toggleBlur');
let demo = qs('.demo');

function setFilter(filter, value) {
  let style = window.getComputedStyle(demo);
	let current = style.getPropertyValue('filter');
  let reg = new RegExp(`${filter}[\\s ]*\\([^\\)]+\\)`);
  demo.style.filter = current.replace(reg, '');
  if (value) {
  	if (current === 'none') {
    	current = '';
    }
  	demo.style.filter = current + ` ${filter}(${value})`;
  }
}
let stateGrayscale =  0;
toggleGrayscale.addEventListener('click', () => {
	stateGrayscale = stateGrayscale ? 0 : '0.5';
	setFilter('grayscale', stateGrayscale);
  
});
let stateBlur =  0;
toggleBlur.addEventListener('click', () => {
	stateBlur = stateBlur ? 0 : '3px';
	setFilter('blur', stateBlur);
});