SVG gradient loose quality when uploaded

Hey! :slight_smile:

I have a problem with the display of an SVG file. This problem shows up in Brave on my laptop and Brave on my phone (landscape), but not Brave for my iPad.
It also shows up in Chrome on my laptop, but not in Safari or DuckDuckGo.

The file is just a square with a circular cut out and a purple color gradient. When uploaded to my Webflow project, the gradient gets messed up - it’s not smooth anymore, there are lines in it. It shows in both the published site and in the Webflow editor/preview.

The weird thing though is that I have the exact same shape/color in another SVG, the only difference is that the size ratios are different (portrait instead of landscape). This shape is set to only show on the phone portrait breakpoint (it’s another element in Weblow). On this one, there are no issues with the gradient in the Webflow editor/preview or on my phone.

How can the exact same gradient get messed up just because the vector size rations are different and also just show in two browsers but not even all devices with those browsers??

Here’s the read-only link. The two project cards (Sell This and HSL) has the vector.

https://preview.webflow.com/preview/magnus-design?utm_medium=preview_link&utm_source=dashboard&utm_content=magnus-design&preview=4d57772cfdd1f04c2f9a31b148a71cfb&workflow=preview

Thanks!