Gradients

Gradients

What is a gradient? A plain guide to colour blends

6 min read

A gradient is the simplest idea in colour and one of the easiest to get wrong. Here is what it is, how it is built, and why it came back to screens everywhere.

Gradients

Linear, radial, conic and mesh: every type of gradient explained

5 min read

Every gradient moves colour along a path. Change the path and you change the feeling. Here is each type, what it looks like, the code for it and the job it does best.

Gradients

Mesh gradients: what they are and how to make one

5 min read

Mesh gradients are the soft, drifting colour fields behind half the launch pages you have seen this year. Here is how they work, how to build one by hand, and the two mistakes that ruin most of them.

Gradients

How to make a gradient background that doesn’t look generic

5 min read

Most gradient backgrounds look alike because they start from the same few presets. Here is a five-step method for making one that looks considered, with codes you can copy.

Gradients

Grainy gradients: why a little noise makes colour look expensive

5 min read

A clean gradient looks like a screen default. The same gradient with a fine layer of grain looks like a print, a film still or a painted wall. Here is why, how much to add and how to do it.

Gradients

Aurora gradients: soft light, done properly

5 min read

Aurora gradients borrow the look of the northern lights: luminous veils of colour drifting over darkness. They are beautiful, and they tip into screensaver territory quickly. Here is how to keep them on the right side.

Gradients

Why your gradient has stripes, and how to fix banding

5 min read

You made a smooth gradient and it came back striped. That is banding, and it has a simple cause and a handful of reliable fixes. Here is the arithmetic, then the cures.

Gradients

Why some gradients go grey in the middle, and how to stop it

5 min read

Blue and yellow should make a lovely gradient. Blend them the default way and you get a grey smudge in the middle. Here is exactly why, and four ways to keep every blend clean.

Gradients

60 gradient colour combinations that work, with codes

5 min read

Sixty gradients, sorted by the feeling you want rather than by hue. Every one is a live CSS code you can copy, and each group explains the rule that makes its blends work.

Gradients

Two-colour gradients: 30 pairs that always work

5 min read

Two colours, one direction, nothing to go wrong. Almost. Here are the two rules that decide whether a pair works, and thirty pairs that pass both, ready to copy.

Gradients

Dark gradient backgrounds: depth without the gloom

5 min read

Dark gradients can look like a premium night scene or like a muddy screen with the brightness turned down. The difference is a handful of decisions, all of them easy to copy.

Gradients

Pastel gradients that stay fresh, not sugary

5 min read

Pastels are the easiest gradients to like and the easiest to overdo. A few rules keep them feeling like spring light on paper rather than a birthday cake.

Gradients

Neon gradients: glow without the eye strain

5 min read

Neon is colour turned all the way up. On a dark ground it glows; spread across a whole screen it buzzes. Here is how to keep the glow and lose the buzz.

Gradients

Holographic gradients and iridescence, explained

5 min read

Holographic foil, soap bubbles and pearl all change colour as you move. A flat screen can't do that, but a well-built gradient can convince the eye it does.

Gradients

The duotone effect: make any photo on-brand in two colours

5 min read

Duotone turns any photo into two colours of your choosing: one for the shadows, one for the light. It is the fastest way to make mismatched pictures look like one brand.

Gradients

Gradient or flat colour? When each one wins

5 min read

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.

Gradients

Gradient texture: grain, paper, glass and silk, explained

5 min read

Two gradients with identical colours can feel like a film still, a letterpress card, a phone screen or an evening dress. The difference is texture, and it says more than the colours do.

Gradients

Glassmorphism and gradients: a practical guide

5 min read

Frosted glass over a glowing gradient is one of the most attractive effects in interface design, and one of the easiest to make unreadable. Here is how to get the beauty and keep the words.

Gradients

Gradient maps: recolour anything in seconds

5 min read

A gradient map takes any picture, photo, texture or illustration, and repaints it in the colours you choose while keeping all of its light and shade. It is the fastest recolouring tool there is.

Gradients

Gradient angle and direction: which way should a gradient go

6 min read

The same two colours can feel calm, uplifting or restless depending only on which way they run. Here is how to choose a direction on purpose, and how to get the angle exactly right in code.

Gradients

Nine gradient design mistakes that make work look cheap

5 min read

Most gradients that look cheap fail in one of nine predictable ways. Here is each mistake, what causes it and the specific change that fixes it.

Gradients

Radial gradients: the spotlight that guides the eye

5 min read

A radial gradient is the closest thing in design to pointing a light at something. Here is how to aim it, size it and keep it from looking like a target.

Gradients

Conic gradients: colour wheels, charts and sheen

5 min read

Linear gradients travel, radial gradients spread, and conic gradients turn. That one difference makes them the right tool for wheels, charts, metal and light beams.

Gradients

Printing gradients without banding or mud

6 min read

A gradient that glows on screen can come back from the printer flat, striped or brown. Almost every one of those failures is predictable, and most are fixable before the file leaves your desk.