I have following CSS code:
div {
background: url('image-url'), linear-gradient(gradient), url('image-url-2');
background-blend-mode: blend-mode-1, blend-mode-2;
}
The position of gradients or url backgrounds can change. I think that should have have any effect on blending order. My question is how are these modes applied to calculate final value?
Do browsers first apply blend-mode-1 on url('image-url') and linear-gradient(gradient) and later apply blend-mode-2 on the result of first and url('image-url-2') or is it the other way around?
Am I using the correct number of background-blend-modes or do I need to specify 3 of them?
The stacking order of the background-images is the key factor here.
Your background images are stacked in the reverse order, the first in the list being the uppermost in the rendering stack.
The blendmodes are applied as any comma separated property applied on backgrounds, the first one to the first image, the second one to the second, and so on.
in your example
div {
background: url('image-url'), linear-gradient(gradient), url('image-url-2');
background-blend-mode: blend-mode-1, blend-mode-2;
}
url2 is at the bottom.
Above it, you have the gradient, with blend-mode-2 applied.
And above it, the image-url with blend-mode-1.
You could set a third background-blend-mode. In this case, it would aply to the blend between image-url-2 and background-color (That you don't set in your example, but that could be set)