CSS Gradients Look Like Poo in Safari

Hey guys, I wanted to get your take on something.

Our new website uses gradients over background images/videos. They look great in Chrome and Firefox, but look really bad in Safari.

Have you guys encountered this? If so, is there a good solution?

Here’s our website for reference:

Thank you all in advance!

Care to share the poo screenshot? Not that I can help with the issue but I’d rather know beforehand if there are any problems with css gradients on my own projects. Thanks!


Sure! Check this out below. Appears same on mobile.



You need to try to replicate this using simple test layout. I don’t believe this is how safari renders gradients by default. Create a new project, div and gradient exactly the way you did it in the project but using as few objects as possible and as little style changes as necessary and see if it looks like that.

Sure enough!

Did a simple test (link below) and it doesn’t look terrible in Safari. Wonder what’s going on with the first site I linked.

Here’s the test replica that looks fine in Safari for some reason:

You should post your read-only link if you want someone to test your setup on Safari

Thanks for the suggestion Alex!

Here’s the link to our site we’re troubleshooting:

Here’s a link to the test that works for some reason:

Solved! Thanks @dram for helping me troubleshoot!

Basically, the transparent value of the gradient should be set to ‘transparent’ explicitly. I had set it to rgba(255, 255, 255, 0) before (or white with 0% opacity)

Thanks again!

Nice job hunting down the problem! Trying to replicate the bug from scratch is my usual goto method.

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