Dithering mixes two colors in a pattern so the eye blends them into a third, letting a small palette imply gradients and texture. Use it for smooth transitions and material texture. Avoid it on small sprites, in moving areas, and anywhere it just hides a missing color. Less is almost always more.
Dithering is the trick that lets eight colors look like twenty. Instead of adding a new color for a gradient, you interleave two existing colors in a pattern, and at normal viewing distance the eye averages them into a shade that is not on your palette at all. It is the same idea old newspapers used to print gray from black ink, and old consoles used to squeeze rich scenes out of tiny color limits.
Used well, it adds depth and texture for free. Used badly, it turns clean pixel art into visual noise.
How Dithering Actually Works
Your eye has limited resolution. Put a checkerboard of red and yellow pixels close enough together and you see orange. Dithering exploits this. By controlling the ratio and pattern of two colors, you control the apparent third color and how smoothly it transitions.
The key variable is density. A 50/50 checkerboard reads as the midpoint of two colors. Bias it toward one color and the blend shifts. Vary that bias across a region and you get a gradient out of two flat colors.
The Main Patterns
There are a handful of patterns worth knowing. Each has a look and a use.
| Pattern | What it looks like | Best for |
|---|---|---|
| Checkerboard (50%) | Even two-color grid | Flat midtones, smooth blends |
| Bayer / ordered | Regular repeating matrix | Large gradients, skies, backgrounds |
| Gradient dither | Density shifts across a region | Soft lighting, rounded surfaces |
| Random / noise | Scattered, irregular | Texture: dirt, rust, organic surfaces |
| Diagonal lines | Hatching at an angle | Stylized shading, retro look |
Ordered (Bayer) dithering is the workhorse for large smooth areas because the regular matrix is predictable and tiles cleanly. Hand-placed gradient dithering gives the most control for shading a single object. Noise dithering is for texture, not gradients, and it is easy to overdo.
Where Dithering Helps
Dithering earns its place in specific spots:
- Gradients on large areas. Skies, water, big background shapes. A two-color sky with ordered dithering looks richer than a flat band and costs no palette.
- Material texture. Stone, rust, fabric, and dirt read as those materials partly because of irregular pixel noise.
- Soft lighting on rounded forms. A gradient dither along the curve of a barrel or a character's shoulder fakes a smooth light falloff.
- Stretching a tight palette. When you are locked to a small palette, dithering is how you imply colors you do not have. Our palette swap guide covers working within strict palettes.
Where Dithering Hurts
This is the part beginners skip, and it is why so much amateur pixel art looks muddy.
| Situation | Why dithering hurts |
|---|---|
| Small sprites (16x16, 32x32) | No room for the pattern to read; it just looks dirty |
| Animated / moving regions | The pattern crawls and shimmers between frames |
| Tiny UI and text | Destroys legibility |
| Hiding a missing color | A real color is usually the better fix |
| Every surface at once | Removes contrast; the whole image reads as noise |
The moving-region problem is the sneaky one. A dither pattern that looks great on a static sprite can shimmer and crawl once the sprite animates, because the pattern shifts frame to frame. If a region moves, keep it flat or hand-place the dither so it stays stable. This connects to frame discipline; the animation timing guide covers reading motion frame by frame.
The honest test: would a single new color do the job better than the dither? Often yes. Dithering is for when you genuinely cannot or should not add a color, not a default way to shade. Reach for the palette first, the dither second.
A Practical Workflow
- Block in your flat colors first. Get the shapes and the palette right with no dithering at all.
- Identify the few areas that actually need a transition: a large gradient, a curved surface, a textured material.
- Add dithering only there, starting sparse. You can always add more.
- View it at the real display size, scaled with nearest-neighbor, not zoomed in. Dithering you can only see at 800% zoom is not doing anything.
- If the sprite animates, play it back and check the dithered areas for crawl. The animation preview makes this quick.
You can experiment with palettes and recoloring without redrawing in the recolor tool, which is handy when you want to test how a dithered blend reads with different color pairs.
Build and test your sprites in the browser.
Block flat colors, add dither where it counts, and preview the animation, all in one editor. No install required.
The Short Version
Dithering blends two colors into an implied third, letting a small palette do more. Use ordered patterns for big gradients, gradient dither for rounded forms, and noise for texture. Keep it off small sprites, moving regions, and UI, and never use it to paper over a color you should have added. For more on working with tight palettes, see the palette swap guide.