Dither Pattern Generator
Dithering renders a shade using only two colours by arranging cells so that their average is the shade. Ordered dithering does it with a threshold matrix, which is why the result has that characteristic crosshatch rather than looking like noise. This builds the Bayer matrix recursively, applies it, and then counts the filled cells back to confirm the pattern really is the intensity you asked for.
What this generator does
Builds the Bayer threshold matrix by recursion, tiles it across the grid, and turns on each cell whose threshold falls below the requested intensity. The filled cells are then counted and compared with what was asked for.
How to use this tool
- Set the grid size and the intensity you want.
- Choose a matrix size — larger gives finer steps.
- Read the achieved intensity against the requested one.
- Copy the pattern as text if you want to use it elsewhere.
Understanding the controls
- Grid size
- Cells across and down. A larger grid can express the intensity more precisely, since the achievable levels depend on the number of cells.
- Intensity
- How much of the area should be filled. Zero is empty, a hundred is solid, and everything between is a pattern.
- Matrix size
- 2, 4 or 8. A larger matrix gives more distinct intensity levels and a more visible texture at a given size.
Common use cases
- Producing one-bit textures for pixel art or a game
- Making a halftone-style fill for a print or a zine
- Teaching ordered dithering with the arithmetic visible
- Generating shading patterns for a plotter or an e-ink display
- Comparing matrix sizes at the same intensity
How this generator works
The Bayer matrix is built by recursion: each step takes the previous matrix, quadruples every value, and adds a different offset in each quadrant — which is what spreads the thresholds as evenly as possible. A cell is filled when its threshold is below the intensity. Before display every cell is re-derived from the matrix, the filled cells are counted, and the achieved intensity is compared against the requested one to within the granularity the grid and matrix allow.
Randomness and fairness
Nothing here is random. A size, an intensity and a matrix give exactly one pattern — that determinism is why ordered dithering tiles seamlessly.
For how randomness is produced across the whole site, see how Generate Random works.
Limitations and good to know
- Only ordered dithering with a Bayer matrix; error-diffusion methods like Floyd-Steinberg look quite different and cannot tile.
- One intensity across the whole grid, so this makes a texture rather than dithering an image.
- The achievable intensities are limited by the matrix size, so small matrices step coarsely.
- The pattern is monochrome — colour dithering needs a matrix per channel.
Privacy and your data
The pattern is computed in your browser and nothing you choose is transmitted, stored or included in analytics.
Related generators
- Geometric Pattern GeneratorBuilds a tiled pattern under a symmetry rule and hands you the SVG — mirrored, half-turn or quarter-turn.
- Truchet Tile GeneratorFills a grid with randomly rotated arc tiles that always join, because the constraint lives in the tile rather than the arrangement.
- Spirograph GeneratorDraws the curve a wheel traces inside a ring, with the number of revolutions before it closes derived from the greatest common divisor.
- Colour Shade Scale GeneratorGenerate a design-system tint and shade ramp — 50 through 950 — where every step sits at the same lightness in every hue.