# Färgstopp i gradienter: placera färger för mjuka gradienter

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

Två gradienter med identiska färger kan se helt olika ut. Skillnaden är var stoppen sitter och hur gradienten färdas mellan dem. Det är den del av en gradient som de flesta aldrig rör.

## The short version

- Färgstopp i en gradient är de punkter längs gradienten där en specifik färg nås, skrivna som en färg följd av en position som `#7c3aed 40%`.
- Stopp utan positioner sprids jämnt, vilket sällan är det mest naturliga valet.
- En färgmittpunkt är en ensam procentsats mellan två stopp som flyttar mittpunkten i deras gradient utan att lägga till en färg.
- Två stopp på samma position skapar en hård kant, vilket är hur ränder och skarpa band görs i CSS.
- Att lägga till flera mellanliggande stopp som följer en easingkurva tar bort den synliga kanten där en linjär tonavklingning börjar och slutar.

**Färgstopp i gradienter** är de punkter där en gradient når en specifik färg. I CSS är varje stopp en färg och en valfri position, som `#7c3aed 40%`, och webbläsaren blandar i en rät linje mellan angränsande stopp. Var du placerar dem avgör nästan allt: om en gradient känns mjuk eller abrupt, om en färg dominerar och om ögat ser en söm där en tonavklingning börjar. Att flytta stopp är ofta en större förbättring än att byta färger.

## Så fungerar färgstopp i gradienter

En gradientlinje löper från 0 procent till 100 procent. Varje stopp fäster en färg vid en punkt på den linjen. Utelämnar du positionerna sprider webbläsaren stoppen jämnt, så tre färger hamnar på 0, 50 och 100 procent. Mellan varje par ändras färgen i konstant takt. Hela syntaxen finns dokumenterad i [MDN:s referens för linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

| Du skriver | Vad som händer |
| --- | --- |
| `#1e3a8a, #f472b6` | Två stopp vid 0 % och 100 % |
| `#1e3a8a 20%, #f472b6 80%` | Enfärgat marinblått till 20 %, gradient, enfärgat rosa efter 80 % |
| `#1e3a8a, 30%, #f472b6` | En färgmittpunkt: mitten flyttas till 30 % |
| `#1e3a8a 50%, #f472b6 50%` | En hård kant i mitten, ingen gradient |
| `#1e3a8a 0 40%, #f472b6 40% 100%` | Dubbel position: två enfärgade band |
| `#1e3a8a 10px, #f472b6 200px` | Längder fungerar lika bra som procent |

Stoppsyntax i CSS. Samma idéer gäller i Figma, Photoshop och varje gradientredigerare, bara med reglage.

## Varför jämnt fördelade stopp ser konstgjorda ut

Riktigt ljus ändras sällan i jämn takt. En solnedgång är mest en färg med ett smalt band av förändring nära horisonten, och en skugga är mest mellanton med ett kort fall vid kanten. Jämn fördelning ger varje färg lika stor andel, vilket läses som ett diagram. Bestäm vilken färg som leder och låt den hålla det mesta av utrymmet.

- Jämn: 0, 50, 100: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 50%, #be123c 100%)`
- Tyngd: blått leder: `linear-gradient(180deg, #0c4a6e 0%, #0e7490 58%, #f59e0b 84%, #be123c 100%)`
- Tyngd: varm topp: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 22%, #be123c 40%, #4c0519 100%)`

En palett, tre placeringar. De tyngda versionerna känns som en himmel i två olika ögonblick, medan den jämna känns genererad.

## Färgmittpunkter: att flytta mitten

En färgmittpunkt är en naken procentsats placerad mellan två stopp. Den lägger inte till en färg, den flyttar punkten där gradienten är exakt halvvägs. En mittpunkt vid 20 procent betyder att färgen når sin mitt tidigt, så den andra färgen anländer snabbt och sedan dröjer sig kvar. Mittpunkter är det billigaste sättet att få en tvåfärgsgradient att kännas mindre mekanisk.

- Ingen mittpunkt, mitten 50 %: `linear-gradient(90deg, #4c1d95, #f9a8d4)`
- Mittpunkt vid 25 %: `linear-gradient(90deg, #4c1d95, 25%, #f9a8d4)`
- Mittpunkt vid 75 %: `linear-gradient(90deg, #4c1d95, 75%, #f9a8d4)`

Samma violett till rosa. Att flytta mittpunkten får en färg att dominera utan att ändra någon av dem.

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

När två stopp delar en position finns det inget avstånd att blanda över, så färgen ändras direkt. Det är så ränder, delade bakgrunder, förloppsindikatorer och flaggor ritas med inget annat än en gradient. Syntaxen med dubbel position, `färg start slut`, gör det kortare att skriva. Upprepande gradienter tar samma idé och lägger den som plattor, vilket tas upp i [repeterande linjära gradienter](https://gradiently.design/sv/guide/css-repeating-gradient).

- Hälften och hälften: `linear-gradient(90deg, #0f172a 0 50%, #f8fafc 50% 100%)`
- Tre band: `linear-gradient(180deg, #fde68a 0 33%, #fb923c 33% 66%, #e11d48 66% 100%)`
- Diagonala steg: `linear-gradient(135deg, #312e81 0 40%, #6d28d9 40% 60%, #c084fc 60% 100%)`

Hårda stopp i praktiken. Ingen gradient, bara kanter.

## Mjukade stopp: ta bort sömmen

En linjär gradient har en synlig början och ett synligt slut. Tona en mörk mörkläggning till genomskinlig över ett foto och du kan ofta se en linje där tonavklingningen börjar, eftersom förändringstakten hoppar från noll till full fart. Att placera flera mellanliggande stopp längs en easingkurva löser det: färgen börjar ändras långsamt, ökar farten och lugnar sig sedan. Det är särskilt användbart för täckningar bakom text och för [genomskinliga gradienter](https://gradiently.design/sv/guide/css-gradient-transparent).

```css
/* Linear: a visible edge where the fade starts */
.scrim-linear {
  background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%);
}

/* Eased: stops follow an ease in out curve, no edge */
.scrim-eased {
  background: linear-gradient(180deg,
    rgba(10, 12, 20, 0) 40%,
    rgba(10, 12, 20, 0.02) 46%,
    rgba(10, 12, 20, 0.08) 52%,
    rgba(10, 12, 20, 0.18) 58%,
    rgba(10, 12, 20, 0.32) 66%,
    rgba(10, 12, 20, 0.48) 74%,
    rgba(10, 12, 20, 0.62) 82%,
    rgba(10, 12, 20, 0.73) 91%,
    rgba(10, 12, 20, 0.8) 100%);
}
```

Båda mörkläggningarna slutar i samma styrka. Den mjukade har ingen linje där den börjar.

> **Samma idé i rörelse** Mjukade stopp är gradientversionen av en easingkurva i animation. [Easing](https://gradiently.design/sv/guide/easing) förklarar varför ease in out känns naturligt, och samma resonemang gäller här.

## Placera stopp: en praktisk metod

1. **Välj den ledande färgen** Ge den 50 till 70 procent av linjen. Den sätter stämningen.
2. **Placera förändringen där blicken ska gå** Lägg den snabbaste färgförändringen nära tyngdpunkten, inte i mitten som standard.
3. **Lägg till mittpunkter före färger** Om en gradient känns fel, prova att flytta dess mitt först. Extra färger ger extra komplexitet.
4. **Kontrollera mittpunkterna** Titta på färgen halvvägs mellan varje par. Om den är grå, lägg till en bro eller blanda i OKLCH, som förklaras i [gradientinterpolering](https://gradiently.design/sv/guide/gradient-interpolation).
5. **Mjuka upp långa tonavklingningar** För allt som tonar till genomskinligt eller till en enfärgad yta, lägg till mellanliggande stopp så att det inte blir någon söm.

### Undvik

- Varje färg får lika stor andel
- En ny färg läggs till för att lösa varje problem
- Linjära tonavklingningar till genomskinligt bakom text
- Hårda stopp där du menade mjuka gradienter

### Gör så här

- En ledande färg, de andra anländer sent
- Färgmittpunkter för att förskjuta en gradient
- Mjukade stopp för mörkläggningar och tonavklingningar
- Hårda stopp bara för ränder och band

Om du vill se stopp i sin enklaste form går [CSS linjära gradienter](https://gradiently.design/sv/guide/css-linear-gradient) igenom hela syntaxen, och [typer av gradienter](https://gradiently.design/sv/guide/types-of-gradients) visar hur stopp beter sig i radiella och koniska gradienter. I Gradiently sköter en Mark sin egen blandning och sitt eget ljus i varje storlek, så du kan börja designa direkt och lägga tiden på orden.

## FAQ

### Vad är ett färgstopp i en gradient?

En punkt längs en gradient där en specifik färg nås, skriven i CSS som en färg med en valfri position, som `#7c3aed 40%`.

### Vad händer om jag inte ger stoppen någon position?

Webbläsaren sprider dem jämnt från 0 till 100 procent. Tre färger hamnar på 0, 50 och 100 procent.

### Vad är en färgmittpunkt i en CSS-gradient?

En ensam procentsats mellan två stopp, som `#4c1d95, 25%, #f9a8d4`. Den flyttar gradientens halvvägspunkt utan att lägga till en färg.

### Hur gör jag en hård linje i en CSS-gradient?

Ge två stopp samma position, till exempel `#0f172a 50%, #f8fafc 50%`, eller använd syntaxen med dubbel position `#0f172a 0 50%, #f8fafc 50% 100%`.

### Hur får jag en gradient att tona mjukt till genomskinlig?

Lägg till flera mellanliggande stopp vars opacitet följer en ease in out-kurva. En enkel tonavklingning med två stopp visar ofta en linje där den börjar.