# Gradient logo: when it works, and when to go flat [Canonical HTML page](https://gradiently.design/guide/gradient-logo) A gradient can make a logo feel alive on a screen and fall apart on a business card. Here is how to decide, how to design one that survives, and the flat version you always need. ## 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. 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](https://gradiently.design/guide/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. - Amber to coral: `linear-gradient(135deg, #ffb347 0%, #ff6f61 100%)` - Teal to blue: `linear-gradient(135deg, #14b8a6 0%, #2563eb 100%)` - Violet to magenta: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)` - Lime to emerald: `linear-gradient(135deg, #a3e635 0%, #059669 100%)` Logo-friendly blends: neighbouring hues at similar strength, so the colour stays clean even when the logo is small. Complementary pairs like orange to blue tend to grey out in the middle; see [muddy gradients](https://gradiently.design/guide/muddy-gradients). ## 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 | If most of your list is on the right side of this table, a flat logo is the better master. Print is not impossible, just demanding. [Printing gradients](https://gradiently.design/guide/print-gradients) covers how to get smooth blends on paper. And for the last row, see [putting a logo on a gradient background](https://gradiently.design/guide/logo-on-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](https://gradiently.design/guide/brand-style-guide) so nobody rebuilds the gradient by eye. - Start stop: violet: #7c3aed - End stop: magenta: #db2777 - Flat fallback: midpoint: #ab30b2 - Mono light: #ffffff - Mono dark: #1a1026 A complete gradient logo colour set: the two stops, a flat fallback taken from the middle of the blend, and light and dark one-colour versions. ## 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](https://gradiently.design/guide/gradient-branding) goes deeper on this approach. A square design with a white wordmark reading Northlight over a rich gradient background A flat white wordmark with the gradient behind it: crisp at any size, and the colour still does the brand's work. A wide banner with the Northlight wordmark in white over the same gradient, laid out for a header 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](https://gradiently.design/guide/svg-gradients) covers the options in full. ```html ``` Give the gradient a unique id. If two inline SVGs on one page share an id and the first is hidden, the second can lose its fill in some browsers. > **The squint test** Look at your gradient logo at avatar size and squint. If you see one flat colour, that colour is your natural fallback. If you see mud, the blend is too long. ## FAQ ### 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.