I just realized the issue isn't with the linear gradient not supported on MacOS.
The real problem is that background-blend-mode css property is not supported on IOS. See here: https://stackoverflow.com/questions/35452263/css-a-background-blend-mode-fallback-for-iphone-safari

As a fallback, I'm considering disabling the background-blend-mode property and setting the background image to a linear gradient instead. This would only apply to mobile and tablet displays across all browsers.

How did I arrive at my current solution?

The idea is to prioritize usability over aesthetics.

I considered setting the background not to repeat as the stackoverflow article suggests but that didn't work in my case. Another option I considered was to set an overlay over the background image and tweak the opacity a bit but that did not give me a very desirable result UX wise.

Hope this helps!