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

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

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.

## The short version

- Gradientens vinkel bestemmer, hvor lyset ser ud til at komme fra, og hvordan øjet bevæger sig gennem et design.
- Gradienter, der er lysere øverst, føles som regel naturlige og rolige, fordi folk forventer lys ovenfra.
- Diagonale gradienter føles mere energiske end lodrette eller vandrette og er det mest almindelige valg til baggrunde og knapper.
- I CSS peger 0deg opad, og vinkler drejer med uret, så 90deg går fra venstre mod højre, mens standarden 180deg går fra top til bund.
- Hjørnenøgleord som to top right tilpasser sig boksens form, mens en fast vinkel som 45deg ikke gør.

En **gradientvinkel** er den retning, gradientens farver ændrer sig i, og den gør mere, end de fleste forventer. Den bestemmer, hvor lyset ser ud til at komme fra, hvor øjet starter og slutter, og om designet føles roligt, opløftende eller rastløst. Som tommelfingerregel føles lyst øverst naturligt, diagonaler føles energiske, og den lyse ende bør ligge væk fra ordene. I CSS starter vinkler ved `0deg`, som peger opad, og drejer med uret.

## Sådan ændrer gradientens retning stemningen

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

De samme tre farver i fire retninger. Kun vinklen ændres, og hver fortæller sin egen historie.

| Retning | Følelse | God til |
| --- | --- | --- |
| Lyst øverst, mørkt nederst | Naturlig, rolig, jordnær som himmel over land | Baggrunde, hjemmesider, læseflader |
| Lyst nederst, mørkt øverst | Lysende, teatralsk som daggry eller en scene | Nattescener, drama, produktpræsentationer |
| Venstre mod højre | Fremdrift, tid, en rejse | Tidslinjer, statusbjælker, bannere |
| Diagonal | Energi, bevægelse, fremdrift | Opslag, knapper, covers, lanceringer |
| Radial fra et hjørne | Et spotlys, en lyskilde | Heroafsnit, covers, fokus på ét område |

Det, hver retning typisk antyder. Venstre mod højre læses som fremdrift i sprog med den læseretning. I højre-mod-venstre-sprog kan det føles omvendt.

## Lys ovenfra

Folk antager ofte, at lys kommer ovenfra, fordi det næsten altid gør, fra solen eller loftet. En gradient, der er lysere øverst, følger forventningen og virker naturlig og rolig: himmel over land, en oplyst væg, en blødt belyst genstand. Vender du den, så lyset ligger nederst, føles samme farver teatralske som et bål, en scene eller en skærm, der lyser i mørket. Ingen af delene er forkert, men det sidste bør være et bevidst valg.

Samme forventning påvirker knapper og kort. En flade, der er lidt lysere øverst, virker hævet. En, der er lysere nederst, virker trykket ind. Det er godt at vide, når du føjer en diskret gradient til en [gradientknap](https://gradiently.design/da/guide/css-gradient-button).

## Diagonaler og energi

Diagonale linjer føles som bevægelse, fordi de virker ustabile sammenlignet med lodrette og vandrette. Derfor er diagonaler, især fra øverst til venstre mod nederst til højre, det mest almindelige valg til sociale opslag, knapper og lanceringsgrafik. Starten øverst til venstre matcher også, hvor læsere af venstre-mod-højre-sprog begynder på en side, så den lyse ende møder dem først.

Stejlere og fladere diagonaler ændrer stemningen. Omkring 100 til 120 grader føles næsten lodret med en svag hældning, roligt uden at være statisk. Omkring 150 til 160 grader føles som sent lys, der stryger hen over en overflade. Præcis 45 eller 135 er mest dynamisk og også mest almindeligt, hvilket er en grund til at prøve noget lidt andet, hvis du vil skille dig ud. Se [gradienter med to farver](https://gradiently.design/da/guide/two-color-gradients).

## Hold lyset væk fra ordene

Retning er også layout. Gradientens lyse ende tiltrækker blikket, så placér den, hvor du ønsker opmærksomhed, og hold teksten på den roligere ende med mere stabil kontrast. En overskrift øverst i et opslag passer til en gradient, der bliver mørkere mod toppen, med glød i et nederste hjørne, eller omvendt med mørk skrift.

Et opslag i højformat, hvor gradientens lyseste del ligger bag overskriften

Når fladens lyseste del lander på overskriften, konkurrerer ordene og lyset.

Samme opslag med gradientens lyse del flyttet væk fra overskriften

Lyset er flyttet væk fra ordene: blikket bevæger sig stadig, og overskriften holder.

## Sådan fungerer gradientvinkler i CSS

I CSS beskriver en lineær gradients vinkel den retning, farverne bevæger sig i. `0deg` peger lige op, og vinkler drejer med uret: `90deg` går fra venstre mod højre, `180deg` fra top til bund og `270deg` fra højre mod venstre. Udelader du vinklen, er standarden `180deg`. Du kan også bruge nøgleord 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øgleord. Det sidste par er forskelligt i alle bokse, der ikke er kvadratiske.

Forskellen i det sidste par betyder noget på bannere og stories. En fast vinkel som `45deg` går altid i 45 grader uanset formen. Et hjørnenøgleord som `to top right` tilpasser vinklen til boksen, så midtpunktets farve går præcis mellem de to andre hjørner. På et bredt 3:1-banner svarer `to top right` til cirka `18deg`, langt tættere på lodret end `45deg`, fordi farvebåndene skal ligge langs den lange diagonal. Brug nøgleord, når gradienten skal gå fra hjørne til hjørne i alle former. Brug grader, når hældningen skal være ens overalt.

| Nøgleord | Vinkel | Forløbets retning |
| --- | --- | --- |
| `to top` | `0deg` | Bund mod top |
| `to right` | `90deg` | Venstre mod højre |
| `to bottom` | `180deg` | Top mod bund (standard) |
| `to left` | `270deg` | Højre mod venstre |
| `to bottom right` | `135deg` kun i et kvadrat | Øverste venstre hjørne mod nederste højre |

CSS-nøgleord og deres vinkler. Hjørnenøgleord svarer kun til 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).

> **Designværktøjer måler anderledes** Mange designværktøjer måler vinkler fra højre og drejer mod uret eller bruger håndtag, du kan trække, frem for tal. Når du flytter en gradient fra en designfil til CSS, så tjek retningen med øjet frem for at kopiere tallet.

## Vælg en retning trin for trin

1. **Beslut, hvor lyset kommer fra** Ovenfra til ro og naturlighed, nedefra til glød og drama, fra et hjørne til spotlys.
2. **Placér ordene først** Sæt overskriften, hvor den hører til i layoutet, og lad så gradientens rolige ende ligge bag den.
3. **Vælg hældningen efter stemningen** Lodret til ro, diagonal til energi, vandret til fremdrift.
4. **Tjek alle formater** En retning, der virker på et kvadrat, kan placere lyset forkert på en story eller et banner. Tilpas efter størrelse frem for at beskære.

Se [lineære CSS-gradienter](https://gradiently.design/da/guide/css-linear-gradient) for resten af syntaksen. Se [typer af gradienter](https://gradiently.design/da/guide/types-of-gradients) for former, der slet ikke har én enkelt retning. Marks i Gradiently renderes til hver størrelse, du designer i, så lyset lander fornuftigt i alle formater frem for dér, hvor en beskæring efterlader det.

## FAQ

### Hvad er den bedste vinkel til en gradient?

Der er ikke én bedste vinkel. Lysere øverst føles naturligt og roligt, diagonaler omkring 135 grader føles energiske, og den lyse ende bør ligge væk fra teksten.

### Hvilken vej peger 0deg i en CSS-gradient?

Opad. `0deg` går fra bund til top, og vinkler drejer med uret, så `90deg` går fra venstre mod højre og `180deg` fra top til bund.

### Hvad er standardretningen for en lineær CSS-gradient?

Fra top til bund, svarende til `180deg` eller `to bottom`.

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

Kun i en kvadratisk boks. `to top right` tilpasser sig boksens form, så gradienten går fra hjørne til hjørne, mens `45deg` bevarer samme hældning i alle former.

### Hvorfor vender min gradient på hovedet efter kopiering fra et designværktøj?

Mange designværktøjer måler vinkler anderledes end CSS. Tjek retningen visuelt, og justér CSS-vinklen.