CSS: Fuzzy linear gradient in Firefox

Question

A CSS linear gradient background element has fuzzy transitions between colours even when the stops are at the same spot.

I have an element with the background defined like so:

background:linear-gradient(to right,
    blue, blue 10%,
    red 10%, red 30%,
    yellow 30%, yellow 40%,
    green 40%, green 50%,
    black 50%
  );

In Firefox, the transitions between the colours are fuzzy. If I use a repeating-linear-gradient the edges are crisp. Both are crisp in Chrome.

I have an example pen here: https://codepen.io/anon/pen/rPVWZE?editors=1100#0

Any ideas on how to fix this?

Looks identical in Chrome and Firefox for me. All the edges are crisp — abney317, Jan 23 '19 at 20:18
I can confirm the edges are a little blurry in Firefox 64.0.2. Even with px. Looks like someone nailed the rendering there. — SirPilan, Jan 23 '19 at 20:31
Heres the fix for it :) https://stackoverflow.com/questions/26652661/blurry-linear-gradient-stops-in-chrome — SirPilan, Jan 23 '19 at 20:36
@Pilan I am also on FF 64.0.2 and the edges are perfectly sharp for me. Weird — abney317, Jan 23 '19 at 20:42
@abney317 Take a screen and zoom in very close, you'll see 1px of each color marginly swapping over — SirPilan, Jan 23 '19 at 20:52
@Pilan Yeah I did that. Definitely no blur on mine. https://i.stack.imgur.com/j6fe7.png — abney317, Jan 23 '19 at 20:56

score 2 · Answer 1 · answered Jan 23 '19 at 20:52

2

Here the effect on FF. I drew some pixels to show zoom level:

A workaround:

.linear{
  height:100px;
  
  background-image:
        linear-gradient(to right, blue 0, blue 100px),
        linear-gradient(to right, red 0, red 100px),
        linear-gradient(to right, yellow 0, yellow 100px);
  
  background-size:
        100px 100px,
        100px 100px,
        100px 100px;
  
  background-position:
        0 0,
        100px 0,
        200px 0;
  
  background-repeat: no-repeat;
}

<div class = "linear"></div>

answered Jan 23 '19 at 20:52

SirPilan

4,649
2
13
26

Your answer seems really complicated - but it does seem to be the only actual working solution. I was hoping there was a flag or obscure css property that would allow the gradient to actually do what I told it to. Thanks for the answer. – Quasipickle Jan 23 '19 at 21:49

CSS: Fuzzy linear gradient in Firefox

1 Answers1