I’ve now become aware of the stacking order and how that affects my issue.
For the gradient to be on the top and the image below, I need to define the gradient first and then the image:
background-image: linear-gradient(to bottom right, var(--grad_1), var(--grad_2)) url('images/image_1.jpg;
but I now struggle to apply my desaturation and opacity filters to my image separately to the gradient. If I do it all together I get a desaturated, low opacity gradient too, which is not what I want. So my question is now
How do I apply my desaturation and opacity filter to my background-image before the result is blended with my linear gradient?
I have tried the ::after pseudo selector but this doesn’t work:
background-image: linear-gradient(to bottom right, var(--grad_1), var(--grad_2));
background-position: left top;
Anyone got any ideas how I can achieve this multi stage affect?