Optical illusion caused by gradient. How can I avoid this effect?

I have a background image that is bright on one side and dark on the other. Below it I have a gray box. The issue is that the gray box appears to be diagonal instead of flat which I believe is caused by an optical illusion due to the brightness of the image above. I measured with page ruler and the pixels appear to be the same on the left as the right.

example problem

I made the quote section thin which appears to exacerbate the issue, but it is still noticeable even if the gray section is thick. Has anyone managed to counteract this optical illusion or work around it?


I think the effect is caused by the combination of the tilted ripples and the gradient in the image above, not the gradient alone. So, I’d suggest you rotate the image to make the ripples level, or choose another image.

It looks fine without the ripples

enter image description here

Source : Link , Question Author : Daniel Jacobson , Answer Author : Billy Kerr

Leave a Comment