1

I'm aware of multiple other issues regarding an issue with using transparent as a colour value in Safari and needing to use rgba(255, 255, 255, 0) as an alternative, but it's not working for me. I'm using the gradient as a "Show More" fade, which has a dark gray background, and the gradient still doesn't look smooth in Safari:

enter image description here

And in Chrome:

enter image description here

Demo: CodePen

The :after gradient is background-image: linear-gradient(rgba(255,255,255,0) 0%, #2b2b2b 100%) and the section background colour is #2b2b2b. What do I need to use for the gradient instead?

Mario Parra
  • 1,504
  • 3
  • 21
  • 46

1 Answers1

1

Try fading from black (instead of white) to #2b2b2b: 

background-image: linear-gradient(rgba(0,0,0,0) 0%, #2b2b2b 100%)
Laura
  • 268
  • 2
  • 9