# CSS linear-gradient: den kompletta guiden till linear-gradient()

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

Varje del av linear-gradient() förklarad med ett levande exempel bredvid koden, från standardriktningen till hårda stopp, lagerlagd glans och mjukare OKLCH-övergångar.

## The short version

- En linjär gradient i CSS är en bild som webbläsaren ritar längs en rak linje, skriven med funktionen linear-gradient() och använd överallt där en bild accepteras, oftast background-image.
- Utan riktning löper en linjär gradient uppifrån och ned, vilket är samma som 180deg. 0deg pekar uppåt och vinklar vrids medsols.
- Färgstopp utan positioner fördelas jämnt, och två stopp på samma position ger en hård kant i stället för en övergång.
- Flera gradienter kan läggas i lager i en enda background-image, åtskilda av kommatecken, där den första ritas överst.
- Om du lägger till en interpoleringsmetod som in oklch förblir mitten av en övergång ljus i stället för att bli grå.

En **linjär gradient i CSS** är en bild som webbläsaren ritar längs en rak linje och som blandar från en färg till nästa. Du skriver den med funktionen `linear-gradient()` och använder den överallt där CSS accepterar en bild, oftast `background-image`. Den behöver ingen fil, skalas till vilken storlek som helst utan att bli suddig och kostar ingenting att ladda ned. Den kortaste användbara versionen är två färger: `linear-gradient(#0f172a, #38bdf8)` tonar från djupt marinblått upptill till himmelsblått nedtill.

```css
.hero {
  background-color: #0f172a; /* shown if the gradient fails */
  background-image: linear-gradient(#0f172a, #38bdf8);
}
```

Den enklaste linjära gradienten: två färger, standardriktning och en enfärgad yta under som reserv.

Marin till himmel, uppifrån och ned: `linear-gradient(#0f172a, #38bdf8)`

Koden ovan, renderad. Ingen riktning betyder uppifrån och ned.

Den här guiden går igenom varje del av funktionen i den ordning du möter dem. Om du vill ha den större bilden av hur linjära gradienter förhåller sig till radiella, koniska och mesh-övergångar börjar du med [typerna av gradienter](https://gradiently.design/sv/guide/types-of-gradients).

## Syntaxen för linear-gradient()

Funktionen tar en valfri riktning, en valfri metod för färginterpolering och därefter en lista med minst två färgstopp. Allt separeras med kommatecken utom riktningen och interpoleringsmetoden, som delar det första argumentet.

| Del | Exempel | Vad den gör |
| --- | --- | --- |
| Riktning som vinkel | `135deg`, `0.25turn` | Anger gradientlinjens vinkel. 0deg pekar uppåt och vinklar vrids medsols. |
| Riktning som nyckelord | `to right`, `to top left` | Riktar linjen mot en sida eller ett hörn av rutan. |
| Interpoleringsmetod | `in oklch`, `in srgb` | Väljer färgrummet som övergången räknas ut i. |
| Färgstopp | `#38bdf8 40%` | En färg, med valfritt en eller två positioner längs linjen. |
| Färghint | `30%` mellan två stopp | Flyttar övergångens halvvägspunkt mellan sina grannar. |

Delarna i linear-gradient(), i den ordning de förekommer. Bara färgstoppen är obligatoriska.

Hela referensen finns på [MDN:s sida om linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient), som också dokumenterar den exakta grammatiken från specifikationen CSS Images.

## Gradientvinklar och riktningsnyckelord

Vinklar följer en kompass: `0deg` pekar uppåt, `90deg` pekar åt höger, `180deg` pekar nedåt och `270deg` pekar åt vänster. Gradienten börjar på motsatt sida och färdas mot den riktning du anger, så `90deg` löper från vänster till höger. Du kan också skriva `turn`, `rad` eller `grad`, där `0.25turn` motsvarar `90deg`. Standarden, när du inte anger något, är `to bottom`.

- 0deg: nedifrån och upp: `linear-gradient(0deg, #1e1b4b, #f472b6)`
- 90deg: från vänster till höger: `linear-gradient(90deg, #1e1b4b, #f472b6)`
- 180deg: standarden: `linear-gradient(180deg, #1e1b4b, #f472b6)`
- 135deg: övre vänstra till nedre högra: `linear-gradient(135deg, #1e1b4b, #f472b6)`

Ett par i indigo och rosa i fyra vinklar. Den första färgen ligger alltid i linjens början.

Hörnnyckelord är inte samma sak som vinklar på 45 grader. `to top right` lutar linjen så att mittfärgen löper exakt mellan de två andra hörnen, oavsett rutans form. På en bred banner är den linjen mycket flackare än `45deg`, som alltid pekar i 45 grader och ignorerar rutans form. Använd nyckelord när övergången ska respektera hörnen och vinklar när flera element med olika former måste dela en riktning. Mer om att välja riktningar finns i [gradientvinklar](https://gradiently.design/sv/guide/gradient-angle).

> **Varför hörnen alltid matchar** Gradientlinjen sträcks så att dess första och sista färg landar exakt i hörnen. För en ruta med bredden W och höjden H i vinkeln A är dess längd `abs(W × sin A) + abs(H × cos A)`. Det är därför en gradient på 135deg på ett mycket brett element ser nästan vågrät ut.

## Färgstopp, positioner och hints

Stopp utan positioner fördelas jämnt, så tre färger hamnar på 0 %, 50 % och 100 %. Ge ett stopp en position i procent eller en längd för att flytta det. Ge det två positioner så håller färgen sig enfärgad mellan dem. Lägg ett ensamt procenttal mellan två stopp så blir det en hint: punkten där övergången når sin halvvägsfärg, vilket gör att ena sidan av övergången går snabbare än den andra.

```css
/* even spacing */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff);

/* a hint: the midpoint arrives early, at 20% */
background-image: linear-gradient(90deg, #0c4a6e, 20%, #22d3ee);

/* two positions: cyan holds solid from 35% to 65% */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff);
```

Tre sätt att forma samma övergång. Positioner kan också vara längder som 120px.

- Jämn fördelning: `linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff)`
- Hint på 20 %: `linear-gradient(90deg, #0c4a6e, 20%, #22d3ee)`
- Hållet band, 35 % till 65 %: `linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff)`

Samma palett från djupt hav till is, formad på tre sätt med positioner och hints.

## Hårda stopp för ränder och delningar

När två stopp delar en position finns det inget utrymme för övergång, så du får en skarp kant. Webbläsare låser också ett stopp som kommer tidigare än det föregående, vilket ger en praktisk genväg: `#f97316 50%, #1e293b 0` betyder att den andra färgen börjar exakt där den första slutar. Upprepa idén med `repeating-linear-gradient()` så har du ränder.

- Delning i hälften: `linear-gradient(90deg, #f97316 50%, #1e293b 0)`
- Tre bärnstensband: `linear-gradient(180deg, #fde68a 0 33%, #f59e0b 0 66%, #b45309 0)`
- Diagonala varningsränder: `repeating-linear-gradient(45deg, #1e293b 0 12px, #f97316 12px 24px)`

Hårda stopp ritar former i stället för övergångar. Det finns många fler i [CSS-mönster](https://gradiently.design/sv/guide/css-patterns).

## Att lägga flera gradienter i lager i en bakgrund

`background-image` accepterar en kommaseparerad lista, och den första bilden målas överst. Lager syns bara genom varandra där de är genomskinliga, så de övre gradienterna tonar oftast ut till `transparent`. Moderna webbläsare blandar i förmultiplicerad alfa, så att tona ut till `transparent` drar inte längre in en grå ton i färgen som det en gång gjorde. Para ihop lager med `background-size` och `background-repeat` när ett lager bara ska täcka en del av rutan.

```css
.card {
  background-color: #111827;
  background-image:
    /* top: a soft sheen across the upper third */
    linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 35%),
    /* bottom: the colour itself */
    linear-gradient(135deg, #312e81, #7c3aed 55%, #db2777);
}
```

En glans lagd över en basgradient. Den första gradienten i listan ritas överst.

Att stapla är också grunden för rikare effekter: lagerlagda radiella sken bildar en [mesh-gradient i CSS](https://gradiently.design/sv/guide/css-mesh-gradient), och ett tunt brusskikt överst döljer trappstegen, som förklaras i [gradientbanding](https://gradiently.design/sv/guide/gradient-banding).

## Mjukare övergångar med färginterpolering

När varje färg skrivs i ett äldre format som hex, `rgb()` eller `hsl()` blandar webbläsaren i sRGB för bakåtkompatibilitet. sRGB-övergångar mellan avlägsna nyanser passerar trista, gråaktiga mittpartier: blått till gult är det klassiska fallet. Om du lägger till `in oklab` eller `in oklch` ber du om ett perceptuellt färgrum, som håller mitten ljusare och jämnare. Den särskilda guiden om [OKLCH-gradienter i CSS](https://gradiently.design/sv/guide/css-gradient-oklch) tar upp nyansriktningar och reservlösningar.

- Standard sRGB: grå mitt: `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab: renare mitt: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch: färdas genom nyanser: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Blått till gult på tre sätt. Bara interpoleringsmetoden ändras.

### Undvik

- Långa övergångar mellan motsatta nyanser i vanlig sRGB
- `to top right` när flera kort med olika former måste dela en riktning
- Att tona till `white` när du menar att tona ut, använd `transparent`
- Mycket mjuka, mörka, breda övergångar utan korn, som får band på många skärmar

### Gör så här

- Lägg till `in oklch` eller ett mittstopp för att hålla övergångar levande
- Använd en vinkel, som `135deg`, för ett enhetligt system
- Tona lager till `transparent` så att det som ligger under syns
- Lägg ett svagt brusskikt över stora mörka gradienter

## Webbläsarstöd och reservlösningar

`linear-gradient()` fungerar utan prefix i alla nuvarande webbläsare, så de gamla `-webkit-`-versionerna kan försvinna. Interpoleringsmetoder, stopp med två positioner och hints är nyare, se [caniuse](https://caniuse.com/css-gradients) för detaljerna. Det säkraste mönstret är en enfärgad `background-color` först, sedan gradienten och sedan en förbättrad version i en senare deklaration, som äldre webbläsare hoppar över eftersom de inte kan tolka den.

```css
.banner {
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a, #f59e0b);
  /* browsers that understand interpolation methods use this line */
  background-image: linear-gradient(90deg in oklch, #1e3a8a, #f59e0b);
}
```

Progressiv förbättring: varje rad åsidosätter den före bara om webbläsaren förstår den.

Om du hellre vill utgå från en övergång som redan har karaktär än att finjustera stopp för hand sparar en [gradientgenerator](https://gradiently.design/sv/guide/gradient-generator) eller ett bibliotek med färdiga bakgrunder tid. Behåll under alla omständigheter koden: en gradient i CSS förblir skarp i alla storlekar och väger några få byte.

## FAQ

### Hur gör jag en linjär gradient i CSS?

Sätt `background-image: linear-gradient(riktning, färg1, färg2)` på ett element, till exempel `linear-gradient(90deg, #0f172a, #38bdf8)`. Lägg en `background-color` före den som reserv.

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

Uppifrån och ned, samma som `to bottom` eller `180deg`. Den första färgen syns överst och den sista nederst.

### Hur gör jag en hård linje i en linjär gradient?

Ge två intilliggande stopp samma position, som `#f97316 50%, #1e293b 50%`, eller använd `0` som andra position så att den låses till det föregående stoppet.

### Varför ser mitten av min gradient grå ut?

Hexfärger blandas i sRGB som standard, vilket dämpar mittpunkten mellan avlägsna nyanser. Lägg till `in oklch` eller `in oklab` efter vinkeln, eller sätt in ett ljusare mittstopp.

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

Bara på en kvadrat. `45deg` pekar alltid i 45 grader, medan `to top right` justerar sin vinkel så att mittfärgen löper mellan rutans två andra hörn.