Search code examples
cssgoogle-chromelinear-gradients

Why this gradient is not properly rendering on Chrome?

I added a simple linear gradient using CSS to a <div>. For some reason, it's not working on Chrome, although, it works fine on Safari.

The CSS rules look like this:

background-color: #043a5f;
background-image: linear-gradient(180deg,#043a5f,rgba(30,113,212,0));
background-position: top;
background-repeat: no-repeat;
background-size: 100% 400px;

The expected result is a light blue gradient over a darker blue background. In the following image, on the left, there is Safari (which looks good), and Chrome on the right.

Safari vs. Chrome rendering

Here is a fiddle to demonstrate that: https://jsfiddle.net/straube/13rsq9y4/

P.S.: I'm running Chrome 88.0.4324.96 and Safari 14.0 (15610.1.28.1.9, 15610) on MacOS 10.15.7.

Solution

  • It might be a Safari bug, actually. rgba(30, 113, 212, 0) is the same "color" as rgba(12, 34, 56, 0) (for example), because there is only one "color" with the alpha value 0: the transparent "color".

    So Chrome (and Firefox) are trying to interpolate between #043a5f (the background color, effectively invisible), and transparent (effectively invisible). Because transparent has no hue, the only variable that changes throughout the gradient is the alpha channel value.

    You can specify three steps in your gradient to achieve the desired result:

    background-image: linear-gradient(180deg, transparent, rgb(30 113 212), transparent);