Multiple div elements with the same linear gradient background do not look the same

Question

I'm having a weird issue where I have 3 div elements on the same page, all of them with the same linear-gradient background.

I expected all these divs to look the same, but the first div is a little darker than the other too.

I created this fiddle to demonstrate.

Basically, I have this html

<div class="a"></div>
<div class="a"></div>
<div class="a"></div>

And this accompanying css

.a {
    height: 200px;
    width: 100%;
    background-image: linear-gradient(to bottom, rgb(50, 50, 50), black);
}

It might seem a little petty, but on my real website, it looks really bad.

It happens on my ubuntu trusty laptop, in both chrome and firefox. Not sure if it happens on mac or windows.

Answer 1

This is an optical illusion. The top part of the second and third divs are directly next to a black area (the bottom of the previous div), so your brain enhances the contrast between them, making the top part of the div look brighter. The top part of the first div is next to the white background, so no such effect occurs (in fact, it's probably perceived as darker than it really is). If you set the background to black, the first div looks brighter, similar to the others (the more black you allow at the top of the page, the more similar they look).

.a {
    height: 200px;
    width: 100%;
    background-image: linear-gradient(to bottom, rgb(50, 50, 50), black);
}

body {
    background: black;
}

<br>
<br>
<br>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>