Here's the code on CodePen. It looks exactly as I expect in Chrome. Firefox and Safari both look wrong. (I'm on the latest versions of all 3.)
I'm working on a way to use a constant gradient background across multiple
The problem was that I used the keyword
transparent rather than a transparent version of the color that it was gradating to. The browsers that didn't render the gradient as expected were treating
transparent as transparent black. That meant that different gradations between black and my color were present in the gradient.
I'm using SASS so the fix is pretty simple: Just use the
rgba() function to convert my hex color to rgba.
background-image: linear-gradient(to top right, rgba($brand-primary, 0), $brand-primary);
I updated the code on CodePen to show the solution.