0

So I am trying to make a linear gradient from an image with a solid color, however, there's a darker line visable where the color and gradient cross:

example:

the line

The CSS:


.green-background {
    background: linear-gradient(to bottom, #3c7c3f, #ffffff);
    background: #3c7c3f;
    background: -webkit-linear-gradient(top, #3c7c3f, #ffffff);
    padding: 100px 0;
}

How to solve this?

Thank you!

benvc
  • 14,448
  • 4
  • 33
  • 54
user1509923
  • 193
  • 1
  • 3
  • 13

1 Answers1

0

It's actually an optical illusion. If you check the HSL values pixel per pixel, you'll see that the color isn't actually getting darker, and the gradient works as expected. I guess it's just the way our eyes perceive such a drastic change in colors (dark green to white).

I suggest try adding a color in between these two or maybe make the top green color a bit lighter. Try to experiment until you find a good match.

Nikita Karamov
  • 517
  • 1
  • 5
  • 18