Liukuvärit

Liukuvärit

What is a gradient? A plain guide to colour blends

6 min lukuaika

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.

Liukuvärit

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

5 min lukuaika

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.

Liukuvärit

Mesh gradients: what they are and how to make one

5 min lukuaika

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.

Liukuvärit

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

5 min lukuaika

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.

Liukuvärit

Grainy gradients: why a little noise makes colour look expensive

5 min lukuaika

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.

Liukuvärit

Revontuliliukuvärit: pehmeää valoa, tehtynä oikein

4 min lukuaika

Revontuliliukuvärit lainaavat revontulten ilmeen: hehkuvia värisilmukoita, jotka ajelehtivat pimeyden yllä. Ne ovat kauniita ja kääntyvät nopeasti näytönsäästäjäksi. Tässä miten pidät ne oikealla puolella.

Liukuvärit

Why your gradient has stripes, and how to fix banding

5 min lukuaika

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.

Liukuvärit

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

5 min lukuaika

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.

Liukuvärit

60 gradient colour combinations that work, with codes

5 min lukuaika

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.

Liukuvärit

Two-colour gradients: 30 pairs that always work

5 min lukuaika

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.

Liukuvärit

Dark gradient backgrounds: depth without the gloom

5 min lukuaika

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.

Liukuvärit

Pastel gradients that stay fresh, not sugary

5 min lukuaika

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.

Liukuvärit

Neon gradients: glow without the eye strain

5 min lukuaika

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.

Liukuvärit

Holographic gradients and iridescence, explained

5 min lukuaika

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.

Liukuvärit

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

5 min lukuaika

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.

Liukuvärit

Gradient or flat colour? When each one wins

5 min lukuaika

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.

Liukuvärit

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

5 min lukuaika

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.

Liukuvärit

Glassmorphism and gradients: a practical guide

5 min lukuaika

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.

Liukuvärit

Gradient maps: recolour anything in seconds

5 min lukuaika

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.

Liukuvärit

Gradient angle and direction: which way should a gradient go

6 min lukuaika

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.

Liukuvärit

Nine gradient design mistakes that make work look cheap

5 min lukuaika

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.

Liukuvärit

Radial gradients: the spotlight that guides the eye

5 min lukuaika

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.

Liukuvärit

Kartiomaiset liukuvärit: väriympyrät, kaaviot ja kiilto

3 min lukuaika

Lineaariset liukuvärit kulkevat, säteittäiset leviävät ja kartiomaiset kääntyvät. Tuo yksi ero tekee niistä oikean työkalun ympyröille, kaavioille, metallille ja valonsäteille.

Liukuvärit

Printing gradients without banding or mud

6 min lukuaika

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.