Gradients Not Showing Properly in Safari

Design help General
1

I have white gradients inside my blog post thumbnails so that the excerpt of the post fades out of view, letting you know there is more to be read. These gradients look great in Chrome, but in Safari—not so much (screenshots below). I tried putting a white (as opposed to transparent) background on the link block which serves as the wrapper for everything, but that didn’t work. Anyone know how to resolve this? Thanks in advance!

1847×1011 172 KB


1846×1011 169 KB

Here is my public share link: https://preview.webflow.com/preview/jumpla?preview=e3dd2bbca2432a73557c00b1c2c99e94

2 Likes
2

Safari can render transparent as the color black with a 0% opacity. To fix this, change any gradient stops from transparent to rgba(255, 255, 255, 0). :+1:

Example: On your News-White Gradient, changing the stop you have at 24% from transparent to rgba(255, 255, 255, 0) looks like this in Safari :slight_smile::

990×592 47.7 KB

4 Likes
3

MAYNE, YOO DA BESS, MAYNE!!! :joy: :joy: :joy: :joy: :joy:

@McGuire, FTW.

1 Like
4

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