CSS linear-gradient displaying wrong color

Question

I'm trying to create a simple horizon striped background use linear-gradient and background-size, the first colour is displaying correctly, but the second colour #58a is displaying a 1px overlay mask in the left side

HTML:

<div></div>

CSS:

div {
    height: 100px;
    background: linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
}

Check the result in this link: https://codepen.io/migcoder/pen/BpOGdL

You may have to zoom-in the browser to see that 1px overlay mask clear.

The strange thing is that if I change the second colour to blue or red(probably more other colours), the problem is gone.

I tested this in Chrome, Firefox and Edge, they are all have same issue, is this a bug?

Maybe its got something to do with OS, system configs etc, I don't know but even at 200% zoom I don't see what you've highlighted in the screenshot. I am using Chrome on a Win7 PC. — Harry
– Harry, Commented Feb 8, 2017 at 15:43
Chrome and other Browser insert default styling. Maybe this causes the gap. Like Harry, I also cannot see what you exactly mean. Use the inspector to see whats going on. — Simon Franzen
– Simon Franzen, Commented Feb 8, 2017 at 15:48
I cannot see the problem in your screenshot either. Sounds like chromatic aberration. Are you wearing glasses? Have you tried viewing a screenshot at high magnification (without smoothing)? — Joachim Lous
– Joachim Lous, Commented Feb 8, 2017 at 15:53
typo: color stops should be at 0, 50px, 50px (not 0) and 100px, isn't it? I can't reproduce the problem either (neither with 0 nor 50px) — FelipeAls
– FelipeAls, Commented Feb 8, 2017 at 15:57

score 4 · Accepted Answer · 2017-02-08 21:15:50Z

4

The body {margin:0} "works" because it removes the white lit pixel on the left. Lemme dive down deeper -

Each pixel in the monitor is built using vertical LED segments for red, green, blue. Red + green makes the yellow but fills only the first to segments of the pixel, while the blue fills only the last one.

It's easier to see in an illustration -

LED pixel

This represents a single pixel on the physical screen. The quality and physical separation depends on the quality of the cell as well as the physical size and resolution of the screen. The lower quality and/or lower resolution, the bigger the cell will appear - also optical influences such as glasses etc. will affect how the cells are perceived through things such as chromatic aberration and general distortion.

The white lit cells next to it can amplify the effect via increased contrast. Removing the margin so that the colored areas is next to dark color will reduce the effect. So basically, it's an optical phenomena (I guess you could call it an illusion, however, there is a actual real physical separation on the screen) due to how the pixel cell is built.

You can amplify the effect even further by using only red and blue colors (the result depends of course on the monitor etc. this is being watched):

div {
  height: 100px;
  background: linear-gradient(#f00 0, #f00 50px, #00f 0px, #00f 100px);
}

<div></div>

If we now take a closer look at the actual physical screen showing the result from the code above:

snapshot

we can see the separation more clearly (the image isn't the best, but hopefully good enough to illustrate; two lines with red, two with blue):

Physical pixel

The pixels to the left represents white of course, and will, because of contrast make the unlit segment next to it (in this case the blue ones) more obvious and therefor increase the effect.

edited Feb 8, 2017 at 21:15

answered Feb 8, 2017 at 21:04

user1693593

Sign up to request clarification or add additional context in comments.

2 Comments

Álvaro González Over a year ago

Simply awesome. Thanks a lot for your contribution.

小广东 Over a year ago

Awesome! Thanks a lot!

Álvaro González · Accepted Answer · 2017-02-08 16:28:53Z

1

Your screen-shot does not feature any 1px overlay mask. Here's a magnified version of your own picture:

Magnified screen-shot

I'm pretty sure it's a mere optical illusion.

answered Feb 8, 2017 at 16:28

Álvaro González

147k45 gold badges282 silver badges378 bronze badges

Comments

Diego Medina · Accepted Answer · 2017-02-08 15:52:45Z

0

Add prefix for navigators

div {
  height: 100px;
  background: -webkit-linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
  background: -o-linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
  background: -moz-linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
  background: linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
}

answered Feb 8, 2017 at 15:52

Diego Medina

1

Collectives™ on Stack Overflow

CSS linear-gradient displaying wrong color

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related