# Gradient or flat colour? When each one wins [Canonical HTML page](https://gradiently.design/guide/gradient-vs-flat-color) Flat colour is clear, cheap and exact. Gradients are alive, distinctive and harder to control. Most good brands use both. Here is how to decide which one each surface needs. ## The short version - Flat colour wins where clarity, exact reproduction and small sizes matter, such as icons, interface controls, body text backgrounds and one-colour print. - Gradients win where a surface needs mood, depth or distinctiveness, such as backgrounds, covers, heroes, social posts and brand fields. - A gradient's contrast changes across its surface, so text on it has to be checked at the worst point, not the average. - Most strong visual identities use a gradient as the signature and a flat colour taken from it as the everyday fallback. - Screens swung from glossy, textured styles to flat design in the early 2010s and back towards softer gradients later, so neither is simply modern or dated. In the **gradient vs flat design** question, neither side wins everywhere. Flat colour is clearer, reproduces exactly and survives tiny sizes and one-colour printing. Gradients carry mood, suggest light and depth, and give a brand far more room to be distinctive. The practical answer for most brands is both: a gradient where the surface is big and expressive, and a flat colour, taken from the gradient, where the job is small, functional or printed in one ink. - Flat violet: `linear-gradient(135deg, #6d28d9 0%, #6d28d9 100%)` - Violet gradient: `linear-gradient(135deg, #2e1065 0%, #6d28d9 55%, #c084fc 100%)` The same violet as a flat fill and as a gradient built around it. One is a colour; the other is a surface with light on it. ## Where flat colour wins - **Small sizes:** favicons, app badges and icons lose a gradient's detail, while a flat colour stays crisp - **Interface controls:** buttons, toggles and states read more clearly when each state is one colour - **Behind long text:** constant contrast means every line is equally readable - **One-colour print:** embroidery, screen printing, engraving, stamps and single-ink jobs can't reproduce a blend - **Exact matching:** a single spot colour can be matched across materials far more reliably than a blend - **Charts and data:** flat colours keep categories distinct and comparable ## Where gradients win - **Large surfaces:** backgrounds, covers, heroes and posters where flat colour feels empty - **Mood and light:** a blend suggests a time of day, a material or a glow that one colour can't - **Distinctiveness:** there are only so many distinguishable single hues, and most are taken in any category - **Social feeds:** a well-built gradient field stands out in a scroll of photos and flat templates - **Depth in interfaces:** a subtle gradient on a hero or a primary card separates layers without shadows - **Motion:** gradients can drift and breathe; see [animated gradient backgrounds](https://gradiently.design/guide/animated-gradient-background) ## Gradient vs flat, factor by factor | Factor | Flat colour | Gradient | | --- | --- | --- | | Legibility | Constant contrast everywhere | Contrast varies; check the worst point | | Recognition | Strong if you own a rare hue | Strong if the recipe stays consistent | | Distinctiveness | Limited by the number of hues | Huge space of combinations | | Small sizes | Excellent | Often muddy or lost | | Print | Exact, even in one ink | Needs full colour; can band or shift | | Interface states | Clear and predictable | Best kept to one or two emphasis areas | | Mood and depth | Limited | Excellent | | File size and effort | Trivial | Small in CSS, larger as images and video | Flat colour is the safer default for function. Gradients are the stronger choice for expression. ## The legibility question On a flat background, if one word passes contrast, every word does. On a gradient, contrast changes as the colour changes, so a headline can read perfectly at one end and disappear at the other. Always measure contrast at the lightest point behind light text, or the darkest point behind dark text. The full method is in [text on a gradient](https://gradiently.design/guide/text-on-gradient) and [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility). A portrait post where a headline crosses both the light and dark parts of a gradient A gradient running straight through the words: contrast changes letter by letter. The same post with a calmer, more even area of the gradient behind the headline The same gradient making room for the words: the expression stays, the legibility comes back. ## A short history: flat, then gradients again Through the 2000s, screens were glossy: bevelled buttons, glassy highlights and textures imitating leather and paper. In the early 2010s, major operating systems moved to flat design, with solid colours, simple icons and no fake depth, and much of the web followed. From the mid-2010s, softer gradients returned, now as smooth blends of two or three colours rather than shiny effects, and some very visible brand icons switched to gradients. More in [the history of gradients](https://gradiently.design/guide/history-of-gradients). The lesson is that neither style is permanently modern. What dates a design is the specific treatment: heavy gloss dates a gradient, and a default palette dates flat colour. ## How to decide for each surface 1. **Ask what the surface is for** If it helps people act, read or compare, lean flat. If it sets a mood or introduces the brand, lean gradient. 2. **Check the size** Below roughly icon size, use flat. Gradients need room to show their blend. 3. **Check how it will be reproduced** One ink, thread or engraving means flat. Screens and full-colour print can carry a gradient. 4. **Check the words** Long text wants a flat or very calm ground. A headline can sit on a gradient if contrast holds at the worst point. 5. **Keep them related** Take your flat colours from your gradient so the two always look like one brand. ### Choose flat for - Favicons, app badges and small icons - Buttons, toggles, tabs and form states - Pages of body text and data tables - Embroidery, stamps and single-ink print ### Choose a gradient for - Covers, posters and social posts - Website heroes and launch pages - Brand fields behind logos and headlines - Loops, wallpapers and presentation openers ## Use both: a gradient with a flat fallback The strongest systems treat the gradient as the signature and choose one or two flat colours from inside it for everyday jobs. The deepest tone becomes the text or icon colour, a mid tone becomes the button colour, and the gradient itself appears on covers, heroes and posts. This is how you get expression and function without two unrelated palettes. [Gradient branding](https://gradiently.design/guide/gradient-branding) walks through it. - Deep: text and icons: #2e1065 - Main: buttons, fallback: #6d28d9 - Light: highlights: #c084fc - Tint: quiet surfaces: #f5f3ff Flat colours taken from the violet gradient above. Each has a job, and together they always match the gradient. Every Mark in Gradiently is a gradient with its own palette built in, so the flat colours for text, buttons and small sizes come from the same recipe as the background. ## FAQ ### Is flat design better than gradients? Neither is better everywhere. Flat colour is best for small sizes, interfaces and one-colour print; gradients are best for large, expressive surfaces and distinctiveness. ### Are gradients outdated? No. Heavy glossy gradients look dated, but soft gradients of two or three colours are widely used in current brand identities and interfaces. ### Should my logo be a gradient or a flat colour? Many logos use a gradient version for large screen use and a flat version for small sizes and one-colour print. You need the flat version either way. ### Is text harder to read on a gradient? It can be, because contrast changes across the gradient. Check contrast at the worst point behind the text, or keep a calm area for words. ### Can I use gradients and flat colours together? Yes, and most strong brands do. Take the flat colours from inside the gradient so everything matches.