I am trying to apply a filter to the body of my page using filter: url(#filter_id), but im not managing to make it work.

This is how im adding it to the styling:

document.body.style.filter = 'url("#filter_id")'

and this is how i am creating the filter

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
svg.setAttribute("width","0" )
svg.setAttribute("height","0" )

var filter = document.createElement("filter");
filter.setAttribute("id","filter_id" )

var feColorMatrix = document.createElement("feColorMatrix")
feColorMatrix.setAttribute("type","matrix")
feColorMatrix.setAttribute("values","1 1 1 1 0 0 1 1 1 0 0 0 1 0 0 0 0 0 1 0")

filter.appendChild(feColorMatrix)
svg.appendChild(filter)

document.body.prepend(svg)

this creates the filter element on the top of the body:

<filter id="filter_id">
<fecolormatrix type="matrix" values="1 1 1 1 0 0 1 1 1 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>

How can i apply it to the full page so that every element gets the color shift that i intend? For context, this is currently employed in a chrome extension im developing.

If i do other types of filters it works (applies to the full page)

document.body.style.filter = "blur(1px)"