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?

  • The gray doesn't appear diagonal to me Commented Jun 10, 2018 at 13:38

1 Answer 1


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.