Toon / cel shading

How it works

Ordinary lighting fades smoothly from the lit side of an object to its dark side. Toon shading, also called cel shading, throws that gradient away and keeps only a few flat steps: usually a lit color and a shadow color, sometimes a third band for a highlight. The look comes from hand-drawn animation, where each frame was painted on a clear celluloid sheet with a small set of flat colors.

The math starts where all diffuse lighting starts: the dot product of the surface normal and the direction toward the light, 1 where the surface faces the light and 0 or less where it turns away. Instead of using that number as a brightness, a toon shader asks one question of it: is it above a threshold? A smoothstep with a narrow window answers yes or no, with just enough blur at the border to keep it from stair-stepping.

Everything that makes toon shading look designed rather than cheap happens around that threshold: where the shadow line sits, how sharp it is, and what color the shadow gets. A shadow that is the base color times a cool tint keeps its hue, the way an animator would paint it, where a darker gray of the base color looks dirty.

Engines differ a lot here. Godot lets a shader replace its lighting with a light() function, so the bands can react to every light in the scene. The card below uses one fixed sun inside the shader instead, which works the same on every platform and is the place to start.