CODEWITHSUNDEEP
css
jokul
jokul

Reputation: 1339

CSS gradients don't appear symmetrical?

I have this set up as an element's background:

div{
    width: 400px;
    height: 200px;
    background: linear-gradient(to right, #6f5a40 40%, #149f79 60%);
}

But the gradient seems to strongly favor the green color despite both colors being given equal space on the gradient function. Is this simply a trick of our eyes, being able to distinguish green better than other colors, or is there something I can do programmatically to fix this? Switching the order of the gradients doesn't seem to do anything: green appears to be favored over the brown.

Fiddle: http://jsfiddle.net/xw6fqymu/

EDIT: I should also point out that this gradient is being overlaid on an image, where the effect is even more noticeable. I don't imagine the image has much to do with this at all since reordering the colors with the image has about as much effect as without the image.

Upvotes: 2

Views: 288

Answers (1)

Alex Shesterov
Alex Shesterov

Reputation: 27525

This seems to be a perceptual issue.

Here are two sample pictures I've created in a graphic editor. Both gradients are purely linear (0% to 100%).

Grey-darkgreen-gradient Black-blue-gradient

As you probably notice, eye starts to perceives colors close to the desaturated edge very early.

What you may do is a non-symmetric distribution, e.g. linear-gradient(to right, #6f5a40 48%, #149f79 70%); — see fiddle.

Upvotes: 2

Related Questions