# CSS lineær gradient: den komplette guide til linear-gradient()

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

Hver del af linear-gradient() forklaret med et levende eksempel ved siden af koden, fra standardretningen til hårde stop, lagdelt glans og blødere OKLCH-blandinger.

## The short version

- En CSS lineær gradient er et billede, browseren tegner langs en ret linje, skrevet med funktionen linear-gradient() og brugt overalt, hvor et billede accepteres, som regel background-image.
- Uden en retning løber en lineær gradient fra top til bund, hvilket svarer til 180deg. 0deg peger opad, og vinkler drejer med uret.
- Farvestop uden positioner fordeles jævnt, og to stop på samme position giver en hård kant i stedet for en blanding.
- Flere gradienter kan lægges i lag i ét background-image, adskilt af kommaer, hvor den første tegnes øverst.
- Tilføjer du en interpolationsmetode som in oklch, forbliver midten af en blanding lys i stedet for at blive grå.

En **CSS lineær gradient** er et billede, browseren tegner langs en ret linje og blander fra den ene farve til den næste. Du skriver den med funktionen `linear-gradient()` og bruger den overalt, hvor CSS accepterer et billede, oftest `background-image`. Den kræver ingen fil, skalerer til enhver størrelse uden at blive sløret og koster intet at downloade. Den korteste brugbare version er to farver: `linear-gradient(#0f172a, #38bdf8)` går fra dyb marineblå øverst til himmelblå nederst.

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

Den enkleste lineære gradient: to farver, standardretning, med en flad farve under som reserve.

Marineblå til himmelblå, fra top til bund: `linear-gradient(#0f172a, #38bdf8)`

Koden ovenfor, gengivet. Ingen retning betyder fra top til bund.

Denne guide gennemgår hver del af funktionen i den rækkefølge, du møder dem. Vil du have det bredere billede af, hvordan lineære gradienter forholder sig til radiale, koniske og mesh-blandinger, så start med [gradienttyperne](https://gradiently.design/da/guide/types-of-gradients).

## Syntaksen for linear-gradient()

Funktionen tager en valgfri retning, en valgfri farveinterpolationsmetode og derefter en liste med mindst to farvestop. Alt adskilles af kommaer undtagen retningen og interpolationsmetoden, som deler det første argument.

| Del | Eksempel | Hvad den gør |
| --- | --- | --- |
| Retning som vinkel | `135deg`, `0.25turn` | Sætter gradientlinjens vinkel. 0deg peger opad, og vinkler drejer med uret. |
| Retning som nøgleord | `to right`, `to top left` | Peger linjen mod en side eller et hjørne af boksen. |
| Interpolationsmetode | `in oklch`, `in srgb` | Vælger det farverum, blandingen beregnes i. |
| Farvestop | `#38bdf8 40%` | En farve, eventuelt med en eller to positioner langs linjen. |
| Farvehint | `30%` mellem to stop | Flytter blandingens midtpunkt mellem dens naboer. |

Delene i linear-gradient() i den rækkefølge, de optræder. Kun farvestoppene er påkrævet.

Den fulde reference findes på [MDN’s side om linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient), som også dokumenterer den præcise grammatik fra CSS Images-specifikationen.

## Gradientvinkler og retningsnøgleord

Vinkler følger et kompas: `0deg` peger opad, `90deg` peger til højre, `180deg` peger nedad, og `270deg` peger til venstre. Gradienten starter på den modsatte side og bevæger sig mod den retning, du angiver, så `90deg` løber fra venstre mod højre. Du kan også skrive `turn`, `rad` eller `grad`, hvor `0.25turn` svarer til `90deg`. Standarden, når du intet angiver, er `to bottom`.

- 0deg: fra bund til top: `linear-gradient(0deg, #1e1b4b, #f472b6)`
- 90deg: fra venstre mod højre: `linear-gradient(90deg, #1e1b4b, #f472b6)`
- 180deg: standarden: `linear-gradient(180deg, #1e1b4b, #f472b6)`
- 135deg: fra øverste venstre hjørne: `linear-gradient(135deg, #1e1b4b, #f472b6)`

Ét par indigo til pink i fire vinkler. Den første farve sidder altid ved linjens start.

Hjørnenøgleord er ikke det samme som vinkler på 45 grader. `to top right` vipper linjen, så midterfarven løber præcis mellem de to andre hjørner, uanset boksens form. På et bredt banner er den linje meget fladere end `45deg`, som altid peger på 45 grader og ignorerer boksens form. Brug nøgleord, når blandingen skal respektere hjørnerne, og vinkler, når flere elementer i forskellige former skal dele én retning. Der er mere om valg af retninger i [gradientvinkler](https://gradiently.design/da/guide/gradient-angle).

> **Hvorfor hjørnerne altid passer** Gradientlinjen strækkes, så dens første og sidste farve lander præcis i hjørnerne. For en boks med bredde W og højde H ved vinklen A er dens længde `abs(W × sin A) + abs(H × cos A)`. Derfor ser en 135deg-gradient på et meget bredt element næsten vandret ud.

## Farvestop, positioner og hints

Stop uden positioner fordeles jævnt, så tre farver sidder ved 0 %, 50 % og 100 %. Giv et stop en position i procent eller en længde for at flytte det. Giv det to positioner, og farven holder fast mellem dem. Sæt en enkelt procent mellem to stop, og den bliver et hint: det punkt, hvor blandingen når sin midterfarve, hvilket får den ene side af overgangen til at gå hurtigere end den anden.

```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 måder at forme den samme blanding på. Positioner kan også være længder som 120px.

- Jævn fordeling: `linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff)`
- Hint ved 20 %: `linear-gradient(90deg, #0c4a6e, 20%, #22d3ee)`
- Holdt bånd, 35 % til 65 %: `linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff)`

Den samme palet fra dybt hav til is, formet på tre måder med positioner og hints.

## Hårde stop til striber og opdelinger

Når to stop deler en position, er der ikke plads til at blande, så du får en skarp kant. Browsere sætter også et stop, der kommer tidligere end det foregående, til den samme position, hvilket giver en praktisk genvej: `#f97316 50%, #1e293b 0` betyder, at den anden farve starter præcis, hvor den første slutter. Gentag idéen med `repeating-linear-gradient()`, så har du striber.

- Deling halvt og halvt: `linear-gradient(90deg, #f97316 50%, #1e293b 0)`
- Tre ravgule bånd: `linear-gradient(180deg, #fde68a 0 33%, #f59e0b 0 66%, #b45309 0)`
- Diagonale advarselsstriber: `repeating-linear-gradient(45deg, #1e293b 0 12px, #f97316 12px 24px)`

Hårde stop tegner former i stedet for blandinger. Der er mange flere i [CSS-mønstre](https://gradiently.design/da/guide/css-patterns).

## Læg flere gradienter i lag i én baggrund

`background-image` accepterer en kommasepareret liste, og det første billede males øverst. Lag skinner kun igennem hinanden, hvor de er gennemsigtige, så de øvre gradienter falmer som regel til `transparent`. Moderne browsere blander i præmultipliceret alfa, så at falme til `transparent` trækker ikke længere en grå tone ind i farven, som det engang gjorde. Kombinér lag med `background-size` og `background-repeat`, når et lag kun skal dække en del af boksen.

```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 lagt oven på en basegradient. Den første gradient på listen tegnes øverst.

Lagdeling er også grundlaget for rigere effekter: lagdelte radiale skær laver en [mesh-gradient i CSS](https://gradiently.design/da/guide/css-mesh-gradient), og et tyndt støjlag øverst skjuler trinene, som forklaret i [gradientbanding](https://gradiently.design/da/guide/gradient-banding).

## Blødere blandinger med farveinterpolation

Når hver farve er skrevet i et ældre format som hex, `rgb()` eller `hsl()`, blander browseren i sRGB af hensyn til bagudkompatibilitet. sRGB-blandinger mellem fjerne farvetoner går gennem matte, grålige midter: blå til gul er det klassiske tilfælde. Tilføjer du `in oklab` eller `in oklch`, beder du om et perceptuelt farverum, som holder midten lysere og jævnere. Den dedikerede guide til [OKLCH-gradienter i CSS](https://gradiently.design/da/guide/css-gradient-oklch) dækker farvetoneretninger og reserver.

- Standard sRGB: grå midte: `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab: renere midte: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch: rejser gennem farvetonen: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Blå til gul på tre måder. Kun interpolationsmetoden ændrer sig.

### Undgå

- Lange blandinger mellem modsatte farvetoner i almindelig sRGB
- `to top right`, når flere kort i forskellige former skal dele én retning
- At falme til `white`, når du mener at falme ud. Brug `transparent`
- Meget bløde, mørke, brede blandinger uden korn, som får bånd på mange skærme

### Gør

- Tilføj `in oklch` eller et midterstop, så blandinger forbliver levende
- Brug én vinkel, som `135deg`, til et ensartet system
- Lad lag falme til `transparent`, så det nedenunder viser sig
- Tilføj et svagt støjlag over store mørke gradienter

## Browserunderstøttelse og reserver

`linear-gradient()` virker uden præfiks i alle nuværende browsere, så de gamle `-webkit-`-versioner kan udgå. Interpolationsmetoder, stop med to positioner og hints er nyere. Tjek [caniuse](https://caniuse.com/css-gradients) for detaljerne. Det sikreste mønster er en flad `background-color` først, så gradienten og derefter en eventuel forbedret version i en senere erklæring, som ældre browsere springer over, fordi de ikke kan tolke 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 forbedring: hver linje overskriver den foregående, kun hvis browseren forstår den.

Vil du hellere starte fra en blanding, der allerede har karakter, end justere stop i hånden, sparer en [gradientgenerator](https://gradiently.design/da/guide/gradient-generator) eller et bibliotek af færdige baggrunde tid. Behold under alle omstændigheder koden: en gradient i CSS forbliver skarp i enhver størrelse og vejer nogle få bytes.

## FAQ

### Hvordan laver jeg en lineær gradient i CSS?

Sæt `background-image: linear-gradient(retning, farve1, farve2)` på et element, for eksempel `linear-gradient(90deg, #0f172a, #38bdf8)`. Tilføj en `background-color` før den som reserve.

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

Fra top til bund, det samme som `to bottom` eller `180deg`. Den første farve vises øverst og den sidste nederst.

### Hvordan laver jeg en hård linje i en lineær gradient?

Giv to nabostop den samme position, som `#f97316 50%, #1e293b 50%`, eller brug `0` som den anden position, så den sættes til det forrige stop.

### Hvorfor ser midten af min gradient grå ud?

Hexfarver blander som standard i sRGB, hvilket gør midtpunktet mellem fjerne farvetoner mat. Tilføj `in oklch` eller `in oklab` efter vinklen, eller indsæt et lysere midterstop.

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

Kun på et kvadrat. `45deg` peger altid på 45 grader, mens `to top right` justerer sin vinkel, så midterfarven løber mellem boksens to andre hjørner.