CODEWITHSUNDEEP
cssgradient
Mario Parra
Mario Parra

Reputation: 1554

Transparent gradient issue over colour background in Safari

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?

Upvotes: 1

Views: 268

Answers (1)

Laura
Laura

Reputation: 278

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

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

Upvotes: 1

Related Questions