H 263 / 3212000s

Cel Shading

2000, Sega's Jet Set Radio

Typeface · Sniglet

Combining Shading and Edge Lines. A three-part diagram combines a colored village scene with a separate black-line rendering to produce an outlined composite.
Combining Shading and Edge Lines. A three-part diagram combines a colored village scene with a separate black-line rendering to produce an outlined composite.Donniedeboer · Public domain · via Wikimedia CommonsView source ↗

Prompt

Transform this image into Cel Shading, using flat saturated color fills, two or three discrete lighting bands, and crisp black contour lines. Replace soft gradients with hard-edged shadow shapes, simplify surface textures, and retain dimensional form through clearly separated light and dark planes. Keep the original subject and composition.

Identify

You see 3D computer graphics that look like flat, hand-drawn 2D animation. Colors feature stark, unblended shadows and sharp black outlines.

Principle

Lighting values are quantized1 into a few discrete steps rather than a smooth gradient. A specialized shader renders bold edge lines around the 3D models.

Example

Smilebit: Jet Set Radio, 2000.

Try it out

Look at a cel-shaded character and notice how shadows jump instantly from light to dark without any smooth transitions.

Background

Before the year 2000, most 3D games pushed for realistic, smooth lighting to mimic the physical world. Developers then realized they could manipulate rendering calculations to mimic traditional animation cels2. Instead of calculating continuous light on curved surfaces, engines map lighting to a small palette of flat colors. This creates distinct bands of highlight, base color, and shadow. Programmers often combine this flat shading with inverted backface rendering3 to generate thick black ink lines around characters. The style exploded in popularity during the early 2000s, keeping aging 3D graphics looking timeless.

Distinction

Unlike standard photorealistic 3D rendering which uses smooth lighting gradients, cel shading forces harsh, stepped transitions between light and dark areas.

Aftermath

It proves that artistic stylization often ages much better than attempts at pure graphical realism.

Further examples · 6 images

Teapot Cel-Shading Demonstration
02 Teapot Cel-Shading DemonstrationThree teapots show a dark wireframe model, a flat green rendering, and an outlined rendering with sharply separated green shadow bands. The final teapot demonstrates quantized lighting and contour lines turning a curved 3D surface into cartoon-like graphics.User:NicolasSourd · CC BY 2.5 · Wikimedia Commons
Cel-Shaded Village and Character
03 Cel-Shaded Village and CharacterA spiky-haired character faces a village green bordered by houses, rounded trees, and distant mountains. Black contours and discrete patches of light and shadow give the three-dimensional scene the flat appearance of drawn animation.Donnie DeBoer · Public domain · Wikimedia Commons
AI illustration: Cel-shaded character design in a retro video game
04 AI illustration: Cel-shaded character design in a retro video gameA stylized rollerblader is displayed on a vintage CRT monitor with bold outlines and flat color fills. The character's shading consists of distinct, non-blended color blocks that mimic traditional 2D cell animation.Illustration generated for the Atlas (AI)
AI illustration: Comparison between realistic and cel-shaded rendering
05 AI illustration: Comparison between realistic and cel-shaded renderingTwo monitors compare a standard 3D render with a cel-shaded version of the same still life. The right screen demonstrates quantized lighting and ink-like outlines that transform 3D geometry into a graphic illustration.Illustration generated for the Atlas (AI)
AI illustration: Environment rendered with non-photorealistic cel-shading
06 AI illustration: Environment rendered with non-photorealistic cel-shadingA van travels through a coastal town rendered with flat colors and simplified architectural details. The scene uses specialized shaders to create a hand-drawn aesthetic across a complex three-dimensional environment.Illustration generated for the Atlas (AI)

Question

Why do cel-shaded 3D objects still rotate smoothly in space?

Show possible answer +

The underlying geometry is still a fully three-dimensional model. Only the math determining its surface colors and shadows has changed.

Sources