# Gradientvinkel och riktning: åt vilket håll ska den gå?

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

Samma två färger kan kännas lugna, lyftande eller rastlösa bara beroende på åt vilket håll de löper. Så väljer du riktning med avsikt, och så får du vinkeln exakt rätt i kod.

## The short version

- En gradients vinkel avgör varifrån dess ljus verkar komma och vart blicken färdas över en design.
- Gradienter som är ljusare upptill känns oftast naturliga och lugna, eftersom människor förväntar sig att ljuset kommer uppifrån.
- Diagonala gradienter känns mer energiska än lodräta eller vågräta och är det vanligaste valet för bakgrunder och knappar.
- I CSS pekar 0deg uppåt och vinklar vrids medurs, så 90deg går från vänster till höger och standardvärdet är 180deg, uppifrån och ner.
- Hörnnyckelord som to top right anpassar sig efter rutans form, medan en fast vinkel som 45deg inte gör det.

**Gradientvinkeln** är den riktning i vilken en gradients färger ändras, och den gör mer jobb än de flesta anar. Den avgör varifrån ljuset verkar komma, var blicken börjar och slutar och om designen känns lugn, lyftande eller rastlös. Som tumregel gäller att ljusare upptill känns naturligt, diagonaler känns energiska och den ljusa änden bör ligga bort från dina ord. I CSS börjar vinklar vid `0deg` som pekar uppåt och vrids medurs.

## Så ändrar gradientens riktning känslan

- 180deg: ljus uppifrån: `linear-gradient(180deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 0deg: glöd underifrån: `linear-gradient(0deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 90deg: vänster till höger: `linear-gradient(90deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 135deg: diagonal: `linear-gradient(135deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`

Samma tre färger i fyra riktningar. Ingenting ändras utom vinkeln, och var och en berättar sin egen historia.

| Riktning | Känns som | Bra för |
| --- | --- | --- |
| Ljust upptill, mörkt nedtill | Naturligt, lugnt, jordnära, som himmel över land | Bakgrunder, webbplatser, läsytor |
| Ljust nedtill, mörkt upptill | Glödande, teatraliskt, som gryning eller en scen | Nattscener, dramatik, produktavslöjanden |
| Vänster till höger | Framsteg, tid, en resa | Tidslinjer, förloppsindikatorer, banners |
| Diagonal | Energi, rörelse, fart | Inlägg, knappar, omslag, lanseringar |
| Radiell från ett hörn | Ett strålkastarljus, en ljuskälla | Heroytor, omslag, fokus på ett område |

Vad varje riktning tenderar att antyda. Vänster till höger läses som framsteg i språk som skrivs från vänster till höger; i språk som skrivs från höger till vänster kan det kännas omvänt.

## Ljus uppifrån

Människor tenderar att anta att ljuset kommer uppifrån, eftersom det nästan alltid gör det, från solen eller ett tak. En gradient som är ljusare upptill matchar den förväntan, så den läses som naturlig och lugn: himmel över land, en upplyst vägg, ett mjukt belyst föremål. Vänd på den så att ljuset ligger nedtill och samma färger känns teatraliska, som en lägereld, en scen eller en skärm som glöder i mörkret. Ingetdera är fel, men det andra bör vara ett val.

Samma förväntan påverkar knappar och kort. En yta som är något ljusare upptill läses som upphöjd; en som är ljusare nedtill läses som intryckt. Det är värt att veta när du lägger en subtil gradient på en [gradientknapp](https://gradiently.design/sv/guide/css-gradient-button).

## Diagonaler och energi

Diagonala linjer känns som rörelse, eftersom de ser instabila ut jämfört med lodräta och vågräta. Därför är diagonaler, särskilt från övre vänstra hörnet till nedre högra, det vanligaste valet för inlägg i sociala medier, knappar och lanseringsgrafik. Starten uppe till vänster stämmer också med var läsare av språk som läses från vänster till höger börjar på en sida, så den ljusa änden hälsar dem först.

Brantare och flackare diagonaler ändrar stämningen. Runt 100 till 120 grader känns nästan lodrätt med en mild lutning, lugnt men inte statiskt. Runt 150 till 160 grader känns som sent ljus som strök över en yta. En exakt 45 eller 135 är den mest dynamiska, och också den vanligaste, vilket är ett skäl att prova något lite annorlunda om du vill sticka ut; se [tvåfärgade gradienter](https://gradiently.design/sv/guide/two-color-gradients).

## Håll ljuset borta från orden

Riktning är också layout. Den ljusa änden av en gradient drar blicken till sig, så placera den där du vill ha uppmärksamhet, och håll texten på den lugnare änden där kontrasten är jämnare. En rubrik högst upp i ett inlägg passar en gradient som mörknar mot toppen, med glöden i det nedre hörnet, eller tvärtom med mörk text.

Ett stående inlägg där gradientens ljusaste del ligger bakom rubriken

När fältets ljusaste del hamnar på rubriken konkurrerar orden och ljuset.

Samma inlägg med gradientens ljusa del flyttad bort från rubriken

Ljuset flyttat bort från orden: blicken färdas fortfarande, och rubriken håller.

## Så fungerar gradientvinklar i CSS

I CSS beskriver en linjär gradients vinkel den riktning färgerna färdas i. `0deg` pekar rakt uppåt och vinklar vrids medurs: `90deg` går från vänster till höger, `180deg` går uppifrån och ner och `270deg` går från höger till vänster. Om du utelämnar vinkeln är standardvärdet `180deg`. Du kan också använda nyckelord som `to right` och `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); }
```

Vinklar och nyckelord. Det sista paret skiljer sig i varje ruta som inte är kvadratisk.

Skillnaden i det sista paret spelar roll på banners och stories. En fast vinkel som `45deg` går alltid i 45 grader, oavsett form. Ett hörnnyckelord som `to top right` lutar vinkeln så att den passar rutan, så att mittpunktens färg går exakt mellan de två andra hörnen. På en bred 3:1-banner blir `to top right` ungefär `18deg`, mycket närmare lodrätt än `45deg`, eftersom färgbanden måste ligga längs den långa diagonalen. Använd nyckelord när du vill att gradienten ska gå från hörn till hörn på vilken form som helst; använd grader när du vill ha samma lutning överallt.

| Nyckelord | Vinkel | Färdriktning |
| --- | --- | --- |
| `to top` | `0deg` | Nedifrån och upp |
| `to right` | `90deg` | Vänster till höger |
| `to bottom` | `180deg` | Uppifrån och ner (standard) |
| `to left` | `270deg` | Höger till vänster |
| `to bottom right` | `135deg` bara i en kvadrat | Från övre vänstra hörnet till nedre högra hörnet |

CSS-nyckelord och deras vinklar. Hörnnyckelord är bara lika med en fast vinkel när rutan är kvadratisk. Se [MDN om linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

> **Designverktyg räknar annorlunda** Många designverktyg mäter vinklar från höger och vrider dem moturs, eller använder handtag att dra i i stället för siffror. När du flyttar en gradient från en designfil till CSS, kontrollera riktningen på ögonmått i stället för att kopiera siffran.

## Att välja riktning, steg för steg

1. **Bestäm varifrån ljuset kommer** Uppifrån för lugn och naturlighet, nerifrån för glöd och dramatik, från ett hörn för ett strålkastarljus.
2. **Placera orden först** Sätt rubriken där den hör hemma i layouten och låt sedan gradienten gå så att dess lugna ände ligger bakom den.
3. **Välj lutningen efter stämningen** Lodrät för lugn, diagonal för energi, vågrät för framsteg.
4. **Kontrollera varje format** En riktning som fungerar på en kvadrat kan lägga ljuset på fel ställe på en story eller banner. Justera per storlek i stället för att beskära.

För resten av syntaxen för linjära gradienter, se [CSS linjära gradienter](https://gradiently.design/sv/guide/css-linear-gradient). För andra former som inte alls har en enda riktning, se [typer av gradienter](https://gradiently.design/sv/guide/types-of-gradients). Marks i Gradiently renderas för varje storlek du designar i, så deras ljus hamnar på ett vettigt ställe i varje format i stället för där en beskärning råkar lämna det.

## FAQ

### Vilken är den bästa vinkeln för en gradient?

Det finns ingen enskild bästa vinkel. Ljusare upptill känns naturligt och lugnt, diagonaler runt 135 grader känns energiska, och den ljusa änden bör ligga bort från din text.

### Åt vilket håll pekar 0deg i en CSS-gradient?

Uppåt. `0deg` går nedifrån och upp, och vinklar vrids medurs, så `90deg` går från vänster till höger och `180deg` uppifrån och ner.

### Vilken är standardriktningen för en linjär CSS-gradient?

Uppifrån och ner, samma som `180deg` eller `to bottom`.

### Är 45deg samma sak som to top right?

Bara i en kvadratisk ruta. `to top right` anpassar sig efter rutans form så att gradienten går från hörn till hörn, medan `45deg` behåller samma lutning på vilken form som helst.

### Varför ser min gradient upp och ner ut när jag kopierat den från ett designverktyg?

Många designverktyg mäter vinklar annorlunda än CSS. Kontrollera riktningen visuellt och justera CSS-vinkeln.