# Fargestopp i gradienter: plasser farger for myke overganger

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

To gradienter med identiske farger kan se helt forskjellige ut. Forskjellen er plasseringen av stoppene og hvordan overgangen går mellom dem. Dette er delen av en gradient de fleste aldri justerer.

## The short version

- Fargestopp i gradienter er punktene der en bestemt farge nås, skrevet som en farge etterfulgt av en posisjon, som `#7c3aed 40%`.
- Stopp uten posisjoner fordeles jevnt, noe som sjelden gir det mest naturlige uttrykket.
- Et fargehint er en enkelt prosentverdi mellom to stopp som flytter midtpunktet i overgangen uten å legge til en farge.
- To stopp på samme posisjon gir en hard kant, slik striper og skarpe bånd lages i CSS.
- Flere mellomliggende stopp som følger en utjevningskurve, fjerner den synlige kanten der en lineær uttoning begynner og slutter.

**Fargestopp i gradienter** er punktene der gradienten når en bestemt farge. I CSS består hvert stopp av en farge og en valgfri posisjon, som `#7c3aed 40%`. Nettleseren blander lineært mellom nabostopp. Plasseringen avgjør nesten alt: om overgangen virker myk eller brå, om én farge dominerer, og om øyet ser en skjøt der uttoningen begynner. Å flytte stoppene gir ofte større forbedring enn å endre fargene.

## Slik fungerer fargestopp i gradienter

En gradientlinje går fra 0 prosent til 100 prosent. Hvert stopp fester en farge til et punkt på linjen. Utelater du posisjonene, fordeler nettleseren stoppene jevnt, slik at tre farger havner ved 0, 50 og 100 prosent. Mellom hvert par endres fargen med konstant hastighet. Hele syntaksen er dokumentert i [MDNs referanse for linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

| Du skriver | Dette skjer |
| --- | --- |
| `#1e3a8a, #f472b6` | To stopp ved 0% og 100% |
| `#1e3a8a 20%, #f472b6 80%` | Ensfarget marineblått til 20%, overgang, ensfarget rosa etter 80% |
| `#1e3a8a, 30%, #f472b6` | Et fargehint: midtpunktet flyttes til 30% |
| `#1e3a8a 50%, #f472b6 50%` | En hard kant i midten, ingen overgang |
| `#1e3a8a 0 40%, #f472b6 40% 100%` | Dobbel posisjon: to ensfargede bånd |
| `#1e3a8a 10px, #f472b6 200px` | Lengdemål fungerer også, ikke bare prosent |

Syntaks for stopp i CSS. Samme prinsipper gjelder i Figma, Photoshop og alle gradientredigerere, bare med skyveknapper.

## Derfor virker jevnt fordelte stopp kunstige

Ekte lys endres sjelden med jevn hastighet. En solnedgang er stort sett én farge med et smalt overgangsbånd nær horisonten. En skygge har mest mellomtoner med et kort fall langs kanten. Jevn fordeling gir hver farge like stor plass, og ligner dermed et diagram. Bestem hvilken farge som leder, og la den fylle mesteparten av flaten.

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

Én palett, tre plasseringer. De vektede versjonene ligner himmelen på to ulike tidspunkt. Den jevne virker generert.

## Fargehint: flytt midtpunktet

Et fargehint er en enkelt prosentverdi mellom to stopp. Det legger ikke til en farge, men flytter punktet der blandingen er nøyaktig halvveis. Et hint ved 20 prosent betyr at fargen når midtpunktet tidlig. Da kommer den andre fargen raskt og varer lenge. Hint er den enkleste måten å gjøre en gradient med to farger mindre mekanisk på.

- Uten hint, midtpunkt 50%: `linear-gradient(90deg, #4c1d95, #f9a8d4)`
- Hint ved 25%: `linear-gradient(90deg, #4c1d95, 25%, #f9a8d4)`
- Hint ved 75%: `linear-gradient(90deg, #4c1d95, 75%, #f9a8d4)`

Samme overgang fra fiolett til rosa. Når hintet flyttes, dominerer én farge uten at noen av fargene endres.

## Harde stopp til striper og bånd

Når to stopp deler posisjon, er det ingen avstand å blande over, så fargen skifter øyeblikkelig. Slik tegnes striper, delte bakgrunner, fremdriftslinjer og flagg med bare en gradient. Syntaksen med dobbel posisjon, `colour start end`, gjør koden kortere. Repeterende gradienter bruker samme tanke og gjentar mønsteret, som beskrevet i [repeterende lineære gradienter](https://gradiently.design/nb/guide/css-repeating-gradient).

- Halvt om halvt: `linear-gradient(90deg, #0f172a 0 50%, #f8fafc 50% 100%)`
- Tre bånd: `linear-gradient(180deg, #fde68a 0 33%, #fb923c 33% 66%, #e11d48 66% 100%)`
- Diagonale trinn: `linear-gradient(135deg, #312e81 0 40%, #6d28d9 40% 60%, #c084fc 60% 100%)`

Harde stopp i bruk. Ingen blanding, bare kanter.

## Myke stopp: fjern skjøten

En lineær overgang har en synlig start og slutt. Ton et mørkt slør mot gjennomsiktig over et bilde, og du ser ofte en linje der uttoningen begynner. Endringstakten hopper nemlig fra null til full hastighet. Flere mellomliggende stopp langs en utjevningskurve løser dette: fargen endres først langsomt, så raskere, før den roer seg. Dette er særlig nyttig for lag bak tekst og [gjennomsiktige gradienter](https://gradiently.design/nb/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%);
}
```

Begge slørene ender med samme styrke. Den myke overgangen har ingen linje ved starten.

> **Samme prinsipp i bevegelse** Myke fargestopp er gradientens versjon av en utjevningskurve i animasjon. [Utjevning](https://gradiently.design/nb/guide/easing) forklarer hvorfor myk inn- og utgang virker naturlig, og samme begrunnelse gjelder her.

## En praktisk metode for å plassere stopp

1. **Velg den ledende fargen** Gi den 50 til 70 prosent av linjen. Den setter stemningen.
2. **Legg skiftet der blikket skal gå** Plasser det raskeste fargeskiftet nær blikkfanget, ikke automatisk i midten.
3. **Legg til hint før du legger til farger** Hvis overgangen virker feil, prøv å flytte midtpunktet først. Flere farger gjør den mer komplisert.
4. **Kontroller midtpunktene** Se på fargen halvveis mellom hvert par. Er den grå, legg til en brofarge eller bland i OKLCH, som forklart i [gradientinterpolasjon](https://gradiently.design/nb/guide/gradient-interpolation).
5. **Gjør lange uttoninger myke** Når noe tones ut mot gjennomsiktig eller ensfarget, legg til mellomliggende stopp så det ikke oppstår en skjøt.

### Unngå

- Like stor plass til alle farger
- En ny farge for å løse hvert problem
- Lineær uttoning mot gjennomsiktig bak tekst
- Harde stopp der du ønsket myke overganger

### Gjør dette

- Én ledende farge, de andre kommer sent
- Fargehint for å forskyve en overgang
- Myke stopp til slør og uttoninger
- Harde stopp bare til striper og bånd

Vil du se stopp i sin enkleste form, går [lineære CSS-gradienter](https://gradiently.design/nb/guide/css-linear-gradient) gjennom hele syntaksen. [Gradienttyper](https://gradiently.design/nb/guide/types-of-gradients) viser hvordan stopp oppfører seg i radiale og koniske gradienter. I Gradiently styrer en Mark selv blanding og lys i alle størrelser. Dermed kan du designe med en gang og bruke tiden på ordene.

## FAQ

### Hva er et fargestopp i en gradient?

Et punkt langs en gradient der en bestemt farge nås. I CSS skrives det som en farge med valgfri posisjon, for eksempel `#7c3aed 40%`.

### Hva skjer hvis jeg ikke angir posisjon for stoppene?

Nettleseren fordeler dem jevnt fra 0 til 100 prosent. Tre farger havner ved 0, 50 og 100 prosent.

### Hva er et fargehint i en CSS-gradient?

En enkelt prosentverdi mellom to stopp, som `#4c1d95, 25%, #f9a8d4`. Den flytter overgangens midtpunkt uten å legge til en farge.

### Hvordan lager jeg en hard linje i en CSS-gradient?

Gi to stopp samme posisjon, for eksempel `#0f172a 50%, #f8fafc 50%`, eller bruk dobbel posisjon: `#0f172a 0 50%, #f8fafc 50% 100%`.

### Hvordan får jeg en gradient til å tones mykt ut mot gjennomsiktig?

Legg til flere mellomliggende stopp der ugjennomsiktigheten følger en kurve med myk inn- og utgang. En enkel uttoning med to stopp får ofte en synlig linje ved starten.