Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
Theare called mach lines caused by the sharpening filter in your eye – joojaa Jul 25 '14 at 12:07
@joojaa Damn eyes... – jlmmns Jul 25 '14 at 13:45
up vote 0 down vote accepted

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

share|improve this answer
That does help quite a bit! Thanks. – jlmmns Jul 25 '14 at 10:46

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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