# Gradientvinkel og retning: hvilken vei bør en gradient gå

[Canonical HTML page](https://gradiently.design/nb/guide/gradient-angle)

De samme to fargene kan føles rolige, oppløftende eller urolige, bare avhengig av hvilken vei de går. Slik velger du retning med vilje, og slik får du vinkelen helt riktig i koden.

## The short version

- Vinkelen på en gradient avgjør hvor lyset ser ut til å komme fra, og hvor øyet beveger seg gjennom et design.
- Gradienter som er lysere øverst, føles som regel naturlige og rolige, fordi folk forventer at lys kommer ovenfra.
- Diagonale gradienter føles mer energiske enn vertikale eller horisontale, og er det vanligste valget for bakgrunner og knapper.
- I CSS peker 0deg oppover og vinklene dreier med klokken, så 90deg går fra venstre til høyre, og standarden er 180deg, fra topp til bunn.
- Hjørnenøkkelord som to top right tilpasser seg boksens form, mens en fast vinkel som 45deg ikke gjør det.

**Gradientvinkelen** er retningen fargene i en gradient endrer seg i, og den gjør mer arbeid enn de fleste tror. Den avgjør hvor lyset ser ut til å komme fra, hvor øyet starter og slutter, og om designet føles rolig, oppløftende eller urolig. Som tommelfingerregel føles lysere øverst naturlig, diagonaler føles energiske, og den lyse enden bør ligge unna ordene dine. I CSS starter vinklene på `0deg`, som peker oppover, og dreier med klokken.

## Hvordan gradientens retning endrer følelsen

- 180deg: lys ovenfra: `linear-gradient(180deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 0deg: glød nedenfra: `linear-gradient(0deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 90deg: venstre til høyre: `linear-gradient(90deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 135deg: diagonal: `linear-gradient(135deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`

De samme tre fargene i fire retninger. Ingenting endres bortsett fra vinkelen, og hver av dem forteller en egen historie.

| Retning | Føles | Passer til |
| --- | --- | --- |
| Lyst øverst, mørkt nederst | Naturlig, rolig, jordnært, som himmel over land | Bakgrunner, nettsteder, leseflater |
| Lyst nederst, mørkt øverst | Glødende, teatralsk, som daggry eller en scene | Nattscener, drama, produktavsløringer |
| Venstre til høyre | Framdrift, tid, en reise | Tidslinjer, framdriftslinjer, bannere |
| Diagonal | Energi, bevegelse, fart | Innlegg, knapper, forsider, lanseringer |
| Radial fra et hjørne | En spotlight, en lyskilde | Heroer, forsider, fokus på ett område |

Hva hver retning gjerne antyder. Venstre til høyre leses som framdrift i språk som skrives fra venstre mot høyre; i språk som skrives fra høyre mot venstre, kan det føles omvendt.

## Lys ovenfra

Folk antar gjerne at lys kommer ovenfra, fordi det nesten alltid gjør det, fra solen eller et tak. En gradient som er lysere øverst, stemmer med den forventningen, så den leses som naturlig og rolig: himmel over land, en opplyst vegg, en mykt belyst gjenstand. Snu den så lyset ligger nederst, og de samme fargene føles teatralske, som et leirbål, en scene eller en skjerm som lyser i mørket. Ingen av delene er feil, men det andre bør være et valg.

Den samme forventningen påvirker knapper og kort. En flate som er litt lysere øverst, leses som hevet; en som er lysere nederst, leses som trykket inn. Det er verdt å vite når du legger en diskret gradient på en [gradientknapp](https://gradiently.design/nb/guide/css-gradient-button).

## Diagonaler og energi

Diagonale linjer føles som bevegelse, fordi de ser ustabile ut sammenlignet med vertikale og horisontale. Derfor er diagonaler, særlig fra øverst til venstre til nederst til høyre, det vanligste valget for innlegg i sosiale medier, knapper og lanseringsgrafikk. Starten øverst til venstre stemmer også med hvor lesere av språk fra venstre mot høyre begynner på en side, så den lyse enden møter dem først.

Brattere og slakere diagonaler endrer stemningen. Rundt 100 til 120 grader føles nesten vertikalt med en svak helning, rolig, men ikke statisk. Rundt 150 til 160 grader føles som sent lys som stryker over en flate. Nøyaktig 45 eller 135 er mest dynamisk, og også mest vanlig, noe som er en grunn til å prøve noe litt annerledes hvis du vil skille deg ut; se [tofargede gradienter](https://gradiently.design/nb/guide/two-color-gradients).

## Hold lyset unna ordene

Retning er også layout. Den lyse enden av en gradient trekker til seg øyet, så plasser den der du vil ha oppmerksomhet, og hold teksten på den roligere enden der kontrasten er jevnere. En overskrift øverst i et innlegg passer til en gradient som blir mørkere mot toppen, med gløden i det nederste hjørnet, eller omvendt med mørk skrift.

Et innlegg i høydeformat der den lyseste delen av gradienten ligger bak overskriften

Når den lyseste delen av feltet havner på overskriften, konkurrerer ordene og lyset.

Det samme innlegget med den lyse delen av gradienten flyttet bort fra overskriften

Lyset er flyttet bort fra ordene: øyet beveger seg fortsatt, og overskriften holder.

## Slik fungerer gradientvinkler i CSS

I CSS beskriver vinkelen på en lineær gradient retningen fargene beveger seg i. `0deg` peker rett opp, og vinklene dreier med klokken: `90deg` går fra venstre til høyre, `180deg` går fra topp til bunn, og `270deg` går fra høyre til venstre. Hvis du utelater vinkelen, er standarden `180deg`. Du kan også bruke nøkkelord som `to right` og `to bottom left`.

```css
/* These pairs are identical */
.a { background: linear-gradient(90deg,  #fde68a, #7c2d12); }
.b { background: linear-gradient(to right, #fde68a, #7c2d12); }

.c { background: linear-gradient(180deg, #fde68a, #7c2d12); }
.d { background: linear-gradient(#fde68a, #7c2d12); } /* default: to bottom */

/* These are only identical in a square box */
.e { background: linear-gradient(45deg, #fde68a, #7c2d12); }
.f { background: linear-gradient(to top right, #fde68a, #7c2d12); }
```

Vinkler og nøkkelord. Det siste paret er forskjellig i enhver boks som ikke er kvadratisk.

Forskjellen i det siste paret betyr noe på bannere og historier. En fast vinkel som `45deg` går alltid i 45 grader, uansett form. Et hjørnenøkkelord som `to top right` vipper vinkelen så den passer boksen, slik at midtfargen går nøyaktig mellom de to andre hjørnene. På et bredt banner i 3:1 blir `to top right` omtrent `18deg`, mye nærmere vertikalt enn `45deg`, fordi fargebåndene må ligge langs den lange diagonalen. Bruk nøkkelord når du vil at gradienten skal gå fra hjørne til hjørne på enhver form; bruk grader når du vil ha samme helning overalt.

| Nøkkelord | Vinkel | Bevegelsesretning |
| --- | --- | --- |
| `to top` | `0deg` | Bunn til topp |
| `to right` | `90deg` | Venstre til høyre |
| `to bottom` | `180deg` | Topp til bunn (standard) |
| `to left` | `270deg` | Høyre til venstre |
| `to bottom right` | `135deg` bare i et kvadrat | Øverste venstre hjørne til nederste høyre hjørne |

Nøkkelord i CSS og vinklene deres. Hjørnenøkkelord tilsvarer bare en fast vinkel når boksen er kvadratisk. Se [MDN om linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

> **Designverktøy teller annerledes** Mange designverktøy måler vinkler fra høyre og dreier mot klokken, eller bruker håndtak du drar i stedet for tall. Når du flytter en gradient fra en designfil til CSS, sjekker du retningen med øyet i stedet for å kopiere tallet.

## Velg retning, steg for steg

1. **Bestem hvor lyset kommer fra** Ovenfra for ro og naturlighet, nedenfra for glød og drama, fra et hjørne for en spotlight.
2. **Plasser ordene først** Sett overskriften der den hører hjemme i layouten, og la så gradienten gå slik at den rolige enden ligger bak den.
3. **Velg helning etter stemning** Vertikalt for ro, diagonalt for energi, horisontalt for framdrift.
4. **Sjekk hvert format** En retning som fungerer i et kvadrat, kan legge lyset på feil sted i en historie eller et banner. Juster per størrelse i stedet for å beskjære.

Resten av syntaksen for lineære gradienter finner du i [lineære gradienter i CSS](https://gradiently.design/nb/guide/css-linear-gradient). Andre former som ikke har én enkelt retning i det hele tatt, finner du i [typer gradienter](https://gradiently.design/nb/guide/types-of-gradients). Marks i Gradiently tegnes for hver størrelse du designer i, så lyset lander på et fornuftig sted i hvert format i stedet for der en beskjæring tilfeldigvis etterlater det.

## FAQ

### Hva er den beste vinkelen for en gradient?

Det finnes ikke én beste vinkel. Lysere øverst føles naturlig og rolig, diagonaler rundt 135 grader føles energiske, og den lyse enden bør ligge unna teksten din.

### Hvilken retning peker 0deg i en CSS-gradient?

Opp. `0deg` går fra bunn til topp, og vinklene dreier med klokken, så `90deg` går fra venstre til høyre og `180deg` går fra topp til bunn.

### Hva er standardretningen for en lineær gradient i CSS?

Topp til bunn, det samme som `180deg` eller `to bottom`.

### Er 45deg det samme som to top right?

Bare i en kvadratisk boks. `to top right` tilpasser seg boksens form så gradienten går fra hjørne til hjørne, mens `45deg` holder samme helning på enhver form.

### Hvorfor ser gradienten min opp ned ut etter at jeg kopierte den fra et designverktøy?

Mange designverktøy måler vinkler annerledes enn CSS. Sjekk retningen visuelt og juster vinkelen i CSS.