How-to
How to Make a Halftone Gradient
The fading-dots gradient look, from scratch. How the dots should change across the fade and how to keep it smooth.
Updated 2026-06-06
A halftone gradient is that look where dots fade from solid to nothing across a shape — big dots on one side, tiny dots on the other. It's everywhere in modern design: backgrounds, hero sections, packaging, album art. The whole effect rests on one idea: the dots should change size as the tone changes.
Start with the gradient, then dot it
The cleanest way to make a halftone gradient is to begin with a plain grey gradient — black fading to white — and run that through a halftone. Where the source is dark, you get large, dense dots. Where it's light, the dots shrink and spread out. The gradient is doing the work; the halftone just translates it into dots.
- Create or load a smooth black-to-white gradient.
- Apply the halftone and watch the dots scale across the fade.
- Adjust the dot grid for how fine or chunky you want the gradient.
- Flip or angle the source gradient to change the fade direction.
Keep the fade smooth
If your gradient has banding — visible steps instead of a smooth fade — the halftone will exaggerate it into ugly jumps in dot size. Start from a clean gradient, and if you still see steps, a touch of dithering on the source smooths the transition before the dots ever get applied.
Using it as a design element
Halftone gradients work best as accents: a corner that fades into dots, a band behind a headline, a transition between two colour blocks. Export SVG so the gradient scales to any canvas without the dots blurring, which matters a lot for web heroes and large print. Recolour the dots in your design tool to match the brand.
Frequently asked questions
- How do I make a halftone gradient?
- Start with a smooth black-to-white gradient and run it through a halftone tool. The dark end becomes large dense dots and the light end becomes small sparse dots, creating the fade.
- Why does my halftone gradient look banded?
- Banding in the source gradient gets exaggerated by the halftone. Start from a clean gradient and apply a little dithering to smooth the transition before adding dots.
- Should a halftone gradient be SVG or PNG?
- SVG, if it will be scaled or printed, so the dots stay crisp and recolourable. PNG is fine for a fixed-size element.