The short version
- A gradient logo works best on screens, at medium and large sizes, and with a simple, bold shape.
- Every gradient logo needs a flat one-colour version for small sizes, one-colour print, embroidery, engraving and stamps.
- Logo gradients read best as short blends between neighbouring hues of similar lightness, which stay vivid when small.
- Design the logo in solid black first; if the shape doesn't work flat, a gradient won't save it.
- Many brands keep the logo flat and put the gradient in their backgrounds instead, which gives the same energy with fewer failure points.
On this page
A gradient logo works when the logo lives mostly on screens, appears at medium or large sizes, and has a bold, simple shape that still reads in a single flat colour. It struggles at tiny sizes, in one-colour print, on embroidery and anywhere colour is limited. So the rule is simple: a gradient logo is fine as the hero version, but you must always have a flat version, and the shape has to work without the gradient first.
Gradient logos became common as brands designed for phones first, where colour glows and screens reproduce blends well. Our look at famous gradient logos covers the well-known examples. This guide is about deciding whether your logo should be one, and doing it well if so.
When a gradient logo works
A gradient earns its place in a logo when it adds something a flat colour can't: a sense of light, of movement, or of several things coming together. It works best in these conditions.
- Screens first. App icons, websites, social avatars and video, where colour is backlit and blends render smoothly.
- Medium and large sizes. A blend needs room; at a few millimetres wide it reads as one muddy colour.
- Simple, solid shapes. A circle, a bold letter or a thick symbol gives the gradient a surface to travel across. Thin lines give it nowhere to go.
- Two or three close colours. Short blends between neighbouring hues stay vivid. Long journeys across the colour wheel go grey in the middle.
- A brand that already uses gradients. The logo then repeats the language of the rest of the identity instead of being the only blend in sight.
Where gradient logos break
Most of the places a logo appears are not a phone screen. Before committing, list where your logo will actually go and check each against this table.
| Where | What happens to a gradient | Use instead |
|---|---|---|
| Browser tab icon | Too small to see the blend; reads as a smudge | Flat symbol in one colour |
| One-colour print, stamps, receipts | Can't be printed at all | Solid black or one ink |
| Embroidery and woven labels | Thread can't blend smoothly | Flat version in one or two thread colours |
| Laser engraving, embossing | No colour at all | The shape alone |
| Small print (business cards, labels) | Blends can band or look blotchy | Flat colour, or a short gradient tested in print |
| On a gradient background | Two blends fight each other | Mono white or dark version |
Print is not impossible, just demanding. Printing gradients covers how to get smooth blends on paper. And for the last row, see putting a logo on a gradient background.
How to design a gradient logo that survives
- 1
Design the shape in solid black
Every logo should work as a silhouette first. If it isn't recognisable in black on white at a small size, a gradient will only hide the problem.
- 2
Choose a short blend
Pick two or three neighbouring hues with similar lightness. Test the midpoint: if it looks grey or brown, move a colour or add a middle stop.
- 3
Decide the direction on purpose
Diagonal blends from top left to bottom right are the most common. A direction that matches the shape, such as bottom to top for something that rises, gives the gradient a reason to be there.
- 4
Pick the flat fallback colour
Choose one solid colour from the blend, often near the midpoint, that people will read as the same brand. This is the colour for small sizes and single-colour use.
- 5
Make the full set
Gradient, flat colour, mono white and mono black. Test each at avatar size, on dark and light backgrounds, and printed.
- 6
Write the rules down
Record the exact stops, angle and fallback in your brand style guide so nobody rebuilds the gradient by eye.
Gradient logo or gradient background
Many brands get the benefit of a gradient without putting it in the logo at all. The logo stays flat and sharp, and the gradient lives in the backgrounds of posts, packaging and the website. The logo never has to fight small sizes or print limits, while the gradient still becomes part of how people recognise you. Gradient branding goes deeper on this approach.
A flat white wordmark with the gradient behind it: crisp at any size, and the colour still does the brand's work.
The same pairing on a wide header. The logo never changes; the gradient is rendered for the shape.
Building a gradient logo in SVG
On the web, a gradient logo should be an SVG with the gradient defined inside it, so it stays sharp at every size. SVG gradients covers the options in full.
<svg viewBox="0 0 120 120" width="120" height="120" role="img" aria-label="Northlight">
<defs>
<linearGradient id="northlight-logo" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#7c3aed" />
<stop offset="1" stop-color="#db2777" />
</linearGradient>
</defs>
<circle cx="60" cy="60" r="52" fill="url(#northlight-logo)" />
</svg>Questions people ask
Are gradient logos a good idea?
They can be, for brands that live mostly on screens and have a bold, simple logo shape. They need a flat one-colour version for small sizes and print.
How do I make a flat version of a gradient logo?
Pick one solid colour from the blend, usually near the midpoint, that people will read as the same brand, and also make mono white and mono black versions.
Can you print a gradient logo?
Yes, in full-colour print at a reasonable size, but not in one-colour print, embroidery or engraving. Test small printed sizes for banding before committing.
What colours make a good gradient logo?
Two or three neighbouring hues of similar lightness, such as amber to coral or teal to blue. Opposite colours tend to go grey in the middle.
Should my logo be a gradient if my brand uses gradients?
Not necessarily. Many brands keep a flat logo and put the gradient in their backgrounds, which gives the same recognition with fewer problems at small sizes.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
