Streaming live at 10am (PST)

Gradients on Safari (Mac) not smooth, obvious lines

Radial and Linear gradients show nice and smooth in Chrome and Firefox.
If Safari they are not smooth and show thick lines of colour changes.

Does anyone else experience this?

The following are screenshots. Some colours and gradients are more obvious than others.



Both screenshots look the same.

I will refer you to this post. I had the same problem in the beginning of the year (and still do) with my iMac Retina 4k.

Are you using a PC or MAC and what browser are you using?

Win 10 Chrome, but it shouldn’t matter because those are screenshots.

Good to see I’m not alone :smile: .
I could see the lines on the example you gave in your post.

I think i will have a play around with the CSS gradients.
On the Webflow homepage I can see the lines on the sections further down the page, however these would be acceptable. I think their gradients are more dramatic in colour changes and result in the lines being much closer together.

If that doesn’t work out I will experiment with the Photoshop examples on your post. :smiley:

Viewing this post on Mac in Safari, Chrome, and Firefox I can still see the difference between the 2 screenshots.

If this can be seen by relatively few devices then I’m happy with that.

I actually see it not only on Safari but all browsers I have used so far. Currently I am not even on my iMac 4k but am on a Mac Book Pro Retina Display on Vivaldi browser and still able to see the lines. :wink:

Sadly there’s nothing we can do to fix the banding. CSS gradients are at the mercy of the rendering engines.

For my safari issue I have found that using 2 solid colors produces a significantly smoother gradient than having a solid background with a transparent gradient overlay.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.