Gradienter

Gradienter

What is a gradient? A plain guide to colour blends

6 min. læsning

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.

Gradienter

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

5 min. læsning

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.

Gradienter

Mesh gradients: what they are and how to make one

5 min. læsning

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.

Gradienter

Lav en gradientbaggrund, der ikke ligner alle andres

4 min. læsning

De fleste gradientbaggrunde ligner hinanden, fordi de starter fra de samme få forudindstillinger. Her er en metode i fem trin til et gennemtænkt udtryk med koder, du kan kopiere.

Gradienter

Grainy gradients: why a little noise makes colour look expensive

5 min. læsning

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.

Gradienter

Aurora-gradienter: blødt lys, gjort ordentligt

5 min. læsning

Aurora-gradienter låner udseendet fra nordlyset: lysende slør af farve, der driver hen over mørket. De er smukke og ender hurtigt som pauseskærm. Sådan holder du dem på den rigtige side.

Gradienter

Farvebånd i gradienter: derfor opstår de, og sådan løses de

5 min. læsning

Du lavede en glat gradient, og den kom tilbage med striber. Det er farvebånd, som har en enkel årsag og en håndfuld sikre løsninger. Her er regnestykket og metoderne.

Gradienter

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

5 min. læsning

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.

Gradienter

60 gradient colour combinations that work, with codes

5 min. læsning

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.

Gradienter

Two-colour gradients: 30 pairs that always work

5 min. læsning

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.

Gradienter

Mørke gradientbaggrunde: dybde uden dysterhed

5 min. læsning

Mørke gradienter kan ligne en eksklusiv natscene eller en mudret skærm med lysstyrken skruet ned. Forskellen er en håndfuld beslutninger, alle lette at kopiere.

Gradienter

Pastel gradients that stay fresh, not sugary

5 min. læsning

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.

Gradienter

Neon gradients: glow without the eye strain

5 min. læsning

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.

Gradienter

Holographic gradients and iridescence, explained

5 min. læsning

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.

Gradienter

Duotone-effekt: giv ethvert foto dit brands to farver

4 min. læsning

Duotone giver ethvert foto to farver, du vælger: én til skyggerne og én til lyset. Det er den hurtigste måde at få forskellige billeder til at ligne ét brand.

Gradienter

Gradient or flat colour? When each one wins

5 min. læsning

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.

Gradienter

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

5 min. læsning

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.

Gradienter

Glassmorphism og gradienter: en praktisk guide

5 min. læsning

Mat glas over en lysende gradient er en af de smukkeste effekter i grænsefladedesign og en af de letteste at gøre ulæselig. Sådan får du skønheden og bevarer ordene.

Gradienter

Gradient maps: recolour anything in seconds

5 min. læsning

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.

Gradienter

Gradientvinkel og retning: vælg den rette vej for farven

5 min. læsning

De samme to farver kan føles rolige, opløftende eller rastløse alene på grund af retningen. Sådan vælger du bevidst og får vinklen helt rigtig i kode.

Gradienter

Nine gradient design mistakes that make work look cheap

5 min. læsning

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.

Gradienter

Radial gradients: the spotlight that guides the eye

5 min. læsning

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.

Gradienter

Koniske gradienter: farvehjul, diagrammer og glans

4 min. læsning

Lineære gradienter bevæger sig, radiale gradienter spreder sig, og koniske gradienter drejer. Den ene forskel gør dem til det rette værktøj til hjul, diagrammer, metal og lysstråler.

Gradienter

Printing gradients without banding or mud

6 min. læsning

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.