Photoshop's gradient positioning

It’s normally not a big deal, but there’s an issue with Photoshop’s gradient rendering that sometimes annoys me — positioning is rounded to the nearest integer, throwing the result off-centre.

It is most apparent when using the radial or reflected gradient types, with some closely spaced, high contrast stops near the end. The radial gradient below demonstrates the rounding — the gradient in the 20×20 pixel rectangle on the left isn’t centred, but the gradient in the 21×21 pixel rectangle on the right is.

It’s even clearer if you watch the gradient while an object is moved fractions of a pixel.

Illustrator has the same issue. The object’s centre point and gradient centre do not align in the example from Illustrator below. It’s not really an issue with print resolution artwork, but for interface design, it is.

All gradient types in Photoshop show the same rounding behaviour. Note the extra pixel on the left hand side of the gradients below. The radial and diamond gradients are also not centred on the Y axis.

Even if you’re creating odd by odd dimensioned objects it may still be an issue, because those objects could be scaled up for other pixel densities.

A 21×21 pixel object is 42×42 pixels for a Retina display, and the gradient will not be correctly centred at that size. As initially stated, this issue may not be apparent in many cases.

Normally, this would be the point in the article where I provide instructions on how to get around the problem. But I don’t have any sane advice.

You could make the gradient larger, turn it into a smart object and scale it down. But, that will break the dithering, reduce quality and is an ugly hack. As is any other turn-it-into-a-bitmap technique. For linear gradients, you could use two overlapping objects and blend between them. That also breaks dithering and isn’t ideal.

I don’t like either of those solutions.

Core Graphics, and apps that use Core Graphics to draw gradients don’t have this issue.

Published 10 April 2015.