When using a stop in my gradient, it doesn't smoothly transition from the solid color before the stop.

It has a thicker appearance. See the picture below.

Notice the visibly darker line in the middle, where the actual gradient starts.

How do I make this smooth, like it should?

The white also seems to stop rather abruptly, even though the bound is at 100%.

This occurs in Photoshop, as well as on the web, using CSS3 gradients.

Is this just my screen?

The color I'm using is #1fa2ae

Update: when I hover with a color detector, the gradient seems fine.

Is this some kind of optical color illusion?

enter image description here

  • Theare called mach lines caused by the sharpening filter in your eye
    – joojaa
    Jul 25, 2014 at 12:07
  • @joojaa Damn eyes...
    – jlmmns
    Jul 25, 2014 at 13:45

1 Answer 1


Try enabling the Dither option in the gradient effect menu. The bar may still be apparent, as I believe it is a bit of an optical illusion, but dithering will smooth out the entire gradient and help to hide the banding at least a little bit.

Left is the picture you posted, right is my gradient with dithering. The appearance of a dark line is still there, but I think that's probably as good as it gets. I've yet to figure out a fool-proof solution to this, myself.

dither demo


Your Answer

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

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