Explaining “Shading Gradients”


Sphere illustration with shadowSphere illustration with highlight

Shading gradients give us a way to add form to our otherwise flat images and drawings, by adding highlights, shadows or perhaps both. The trick to getting these “right” is to make sure that your gradient is the same colour at either end, which will make sure you get a nice smooth blend to transparency. If that sounds a bit confusing, here’s the explanation that will hopefully clear it up. :)

If your shading gradients end up with a flat, matte looking blend as illustrated above, then you’re probably doing what I see quite often in this sort of thing, simply using a default black to white gradient with one stop or the other set to an opacity of 0%.

So what’s happening? If you imagine the colour and the transparency as two separate things for a moment (which is actually pretty much as it is) and think about the colour that would be at 50% of a gradient from black to white. Neutral grey, right? Now think about the opacity/transparency (both sides of the same coin for me so you choose) and what you’d have at the 50% mark there- so the end result of the two combined would be neutral grey at 50% opacity.

So if you set both ends to the same colour, you’ll get exactly that colour, at whatever opacity you want. Easy!



One thought on “Explaining “Shading Gradients””

Leave a Reply