What's the difference between the two dithering algorithms offered?

Ordered (Bayer) dithering compares each pixel against a fixed repeating 4x4 threshold matrix, producing a regular, grid-like pattern; Floyd-Steinberg diffuses each pixel's rounding error into its neighbors, producing a more organic, less repetitive-looking pattern.

Is this the same as this toolbox's GIF Ditherer tool?

No, GIF Ditherer applies dithering to an uploaded GIF you already have; this tool is the generator counterpart, it builds its own gradient demo image from scratch rather than accepting an upload, specifically to showcase the dithering techniques on a clean, controlled source image.

Why does the image only use black and white?

Reducing all the way to 2 colors makes the dither pattern itself maximally visible; the whole point of this tool is to demonstrate the pattern, not to produce a subtly-reduced color image.

Why does the pattern move?

The underlying gradient's phase shifts each frame, so the same dithering algorithm is re-applied to a slightly shifted gradient every frame, making the resulting dither texture appear to scroll.

Dithered GIF Creator - Ordered & Floyd-Steinberg Dither Demo Generator

Overview

Introduction

Dithering is the classic trick for making a limited color palette look richer than it is, scattering black and white pixels so the eye blends them into a perceived gray, rather than showing a hard, banded step.

This tool generates a clean demo of that technique from scratch: a smooth gradient, reduced to pure black and white using either of two well-known dithering algorithms, animated so the pattern visibly scrolls.

What Is Dithered GIF Creator?

A generator that builds a horizontal grayscale gradient (not an uploaded image) and reduces it to strictly 2 colors using a visible dither pattern.

Two algorithms are available: 4x4 ordered (Bayer matrix) dithering, and Floyd-Steinberg error-diffusion dithering, the two most commonly taught approaches to the technique.

How Dithered GIF Creator Works

Ordered dithering compares each pixel's grayscale value against a fixed 4x4 threshold matrix (tiled across the whole image) to decide black or white, producing a regular, crosshatch-like pattern.

Floyd-Steinberg dithering instead processes pixels left-to-right, top-to-bottom, rounding each one to black or white and pushing the resulting rounding error into its right and lower neighbors, producing a more scattered, organic-looking pattern; both are recomputed fresh each frame against a phase-shifted gradient to animate the scroll.

When To Use Dithered GIF Creator

Use it to visually compare ordered vs. Floyd-Steinberg dithering side by side, or to see how either technique handles a smooth gradient.

It's also a handy reference image for demonstrating why GIF-era graphics leaned so heavily on dithering to fake extra color depth.

Often used alongside True Color GIF Creator and Low Quality GIF Creator.

Features

Advantages

Demonstrates two distinct, well-known dithering algorithms rather than just one.
Builds its own controlled gradient source rather than depending on an uploaded image, making comparisons consistent.
Animates the pattern, making the dithering technique easier to observe than a single static frame.

Limitations

Reduces only to 2 colors (black/white); it doesn't currently offer dithering into a larger reduced palette.
The source image is always a synthetic horizontal gradient, not an arbitrary photo.

Examples

Generating an ordered-dither scrolling gradient

Input

width: 160, height: 120, algorithm: ordered, frameCount: 12

Output

An animated black-and-white GIF showing a crosshatch-like dither pattern that scrolls horizontally as the underlying gradient's phase shifts each frame.

Each frame independently re-dithers a phase-shifted gradient against the fixed 4x4 Bayer matrix, producing a stable pattern that appears to scroll.

Best Practices & Notes

Best Practices

Use ordered dithering if you want a clean, regular, easily-explainable pattern; use Floyd-Steinberg if you want a more natural-looking, less repetitive texture.
Compare this tool's output against True Color GIF Creator's undithered banding to see the value dithering adds.
Keep frame count moderate; the scrolling effect is easy to see even with a modest number of frames.

Developer Notes

Floyd-Steinberg's error diffusion uses the standard 7/16, 3/16, 5/16, 1/16 weight distribution to the right, bottom-left, bottom, and bottom-right neighbors respectively, computed independently per frame against a freshly-built grayscale buffer rather than reusing state across frames.

Dithered GIF Creator Use Cases

Demonstrating the difference between ordered and error-diffusion dithering for an educational or reference context
Producing a reference GIF for comparing dithered vs. undithered gradient rendering
Generating a retro, halftone-style animated texture

Common Mistakes

Expecting a full-color dithered image; this tool intentionally reduces all the way to 2 colors to make the pattern maximally visible.
Confusing this tool with GIF Ditherer, which dithers an uploaded GIF rather than generating a demo gradient from scratch.

Tips

Try both algorithms on the same settings to see how differently they distribute error across the same gradient.
Use True Color GIF Creator alongside this tool for a direct comparison between undithered banding and dithered pseudo-gradation.

Dithered GIF Creator