# Farvestop i gradienter: placér farverne til glatte overgange

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

To gradienter med identiske farver kan se helt forskellige ud. Forskellen er, hvor stoppene sidder, og hvordan overgangen bevæger sig imellem dem. Det er den del af en gradient, de fleste aldrig rører.

## The short version

- Farvestop i en gradient er de punkter langs gradienten, hvor en bestemt farve nås, skrevet som en farve efterfulgt af en position som `#7c3aed 40%`.
- Stop uden positioner fordeles jævnt, hvilket sjældent er det mest naturlige valg.
- Et color hint er en enlig procentværdi mellem to stop, der flytter midtpunktet i deres overgang uden at tilføje en farve.
- To stop i samme position skaber en skarp kant, og det er sådan, striber og skarpe bånd laves i CSS.
- Flere mellemliggende stop, der følger en easingkurve, fjerner den synlige kant, hvor en lineær overgang begynder og slutter.

**Farvestop i gradienter** er de punkter, hvor en gradient når en bestemt farve. I CSS er hvert stop en farve og en valgfri position, som `#7c3aed 40%`, og browseren blander i en lige linje mellem nabostop. Hvor du placerer dem, afgør næsten alt: om en overgang føles glat eller brat, om én farve dominerer, og om øjet ser en søm, hvor en overgang begynder. At flytte stop er ofte en større forbedring end at skifte farver.

## Sådan virker farvestop i gradienter

En gradientlinje løber fra 0 procent til 100 procent. Hvert stop fastgør en farve til et punkt på linjen. Udelader du positionerne, fordeler browseren stoppene jævnt, så tre farver lander på 0, 50 og 100 procent. Mellem hvert par ændrer farven sig i et konstant tempo. Hele syntaksen er dokumenteret i [MDNs reference om linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

| Du skriver | Hvad der sker |
| --- | --- |
| `#1e3a8a, #f472b6` | To stop på 0% og 100% |
| `#1e3a8a 20%, #f472b6 80%` | Massiv marineblå til 20%, overgang, massiv pink efter 80% |
| `#1e3a8a, 30%, #f472b6` | Et color hint: midtpunktet flytter til 30% |
| `#1e3a8a 50%, #f472b6 50%` | En skarp kant i midten, ingen overgang |
| `#1e3a8a 0 40%, #f472b6 40% 100%` | Dobbelt position: to massive bånd |
| `#1e3a8a 10px, #f472b6 200px` | Længder virker lige så godt som procenter |

Syntaksen for stop i CSS. De samme idéer gælder i Figma, Photoshop og alle gradienteditorer, bare med skydere.

## Hvorfor jævnt fordelte stop ser kunstige ud

Rigtigt lys ændrer sig sjældent i et jævnt tempo. En solnedgang er for det meste én farve med et smalt bånd af forandring nær horisonten; en skygge er for det meste mellemtone med et kort fald ved kanten. Jævn fordeling giver hver farve samme andel, hvilket læses som et diagram. Bestem, hvilken farve der fører, og lad den fylde det meste af pladsen.

- Jævn: 0, 50, 100: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 50%, #be123c 100%)`
- Vægtet: blå fører: `linear-gradient(180deg, #0c4a6e 0%, #0e7490 58%, #f59e0b 84%, #be123c 100%)`
- Vægtet: varm top: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 22%, #be123c 40%, #4c0519 100%)`

Én palet, tre placeringer. De vægtede udgaver føles som en himmel på to forskellige tidspunkter; den jævne føles genereret.

## Color hints: flyt midtpunktet

Et color hint er en nøgen procentværdi placeret mellem to stop. Det tilføjer ikke en farve; det flytter det punkt, hvor overgangen er præcis halvvejs. Et hint på 20 procent betyder, at farven når sit midtpunkt tidligt, så den anden farve kommer hurtigt og så bliver hængende. Hints er den billigste måde at få en gradient med to farver til at føles mindre mekanisk.

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

Den samme violet til pink. Når hintet flyttes, dominerer én farve, uden at nogen af dem redigeres.

## Hårde stop til striber og bånd

Når to stop deler en position, er der ingen afstand at blande hen over, så farven skifter øjeblikkeligt. Det er sådan, striber, delte baggrunde, statuslinjer og flag tegnes med intet andet end en gradient. Syntaksen med dobbelt position, `farve start slut`, gør det kortere at skrive. Gentagne gradienter tager den samme idé og gentager den, som beskrevet i [gentagne lineære gradienter](https://gradiently.design/da/guide/css-repeating-gradient).

- Halvt og 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 trin: `linear-gradient(135deg, #312e81 0 40%, #6d28d9 40% 60%, #c084fc 60% 100%)`

Hårde stop i aktion. Ingen overgange, kun kanter.

## Blødt fordelte stop: fjern sømmen

En lineær overgang har en synlig start og slutning. Lad en mørk scrim tone ud til gennemsigtig over et foto, og du kan ofte se en linje, hvor overgangen begynder, fordi forandringstempoet springer fra nul til fuld fart. Flere mellemliggende stop placeret langs en easingkurve løser det: farven begynder at ændre sig langsomt, tager fart og falder så til ro. Det er især nyttigt til overlays bag tekst og til [gennemsigtige gradienter](https://gradiently.design/da/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 scrims ender i samme styrke. Den blødt fordelte har ingen linje, hvor den begynder.

> **Den samme idé i bevægelse** Blødt fordelte stop er gradientudgaven af en easingkurve i animation. [Easing](https://gradiently.design/da/guide/easing) forklarer, hvorfor ease in out føles naturligt, og den samme logik gælder her.

## Placering af stop: en praktisk metode

1. **Vælg den førende farve** Giv den 50 til 70 procent af linjen. Den sætter stemningen.
2. **Placér skiftet, hvor øjet skal hen** Sæt det hurtigste farveskift nær fokuspunktet, ikke automatisk i midten.
3. **Tilføj hints, før du tilføjer farver** Føles en overgang forkert, så prøv først at flytte dens midtpunkt. Ekstra farver tilføjer kompleksitet.
4. **Tjek midtpunkterne** Se på farven halvvejs mellem hvert par. Er den grå, så tilføj en bro, eller bland i OKLCH, som forklaret i [interpolation i gradienter](https://gradiently.design/da/guide/gradient-interpolation).
5. **Gør lange overgange bløde** For alt, der toner ud til gennemsigtig eller til en flad farve, tilføjer du mellemliggende stop, så der ikke er nogen søm.

### Undgå

- Hver farve får en lige stor andel
- En ny farve tilføjet for at løse hvert problem
- Lineære overgange til gennemsigtig bag tekst
- Hårde stop, hvor du mente bløde overgange

### Gør

- Én førende farve, de andre kommer sent
- Color hints til at forskyde en overgang
- Blødt fordelte stop til scrims og overgange
- Hårde stop kun til striber og bånd

Vil du se stop i deres enkleste form, gennemgår [CSS linear gradients](https://gradiently.design/da/guide/css-linear-gradient) hele syntaksen, og [typer af gradienter](https://gradiently.design/da/guide/types-of-gradients) viser, hvordan stop opfører sig i radiale og koniske gradienter. I Gradiently klarer en Mark sin egen blanding og sit eget lys i alle størrelser, så du kan designe med det samme og bruge tiden på ordene.

## FAQ

### Hvad er et farvestop i en gradient?

Et punkt langs en gradient, hvor en bestemt farve nås, skrevet i CSS som en farve med en valgfri position, som `#7c3aed 40%`.

### Hvad sker der, hvis jeg ikke giver stoppene en position?

Browseren fordeler dem jævnt fra 0 til 100 procent. Tre farver lander på 0, 50 og 100 procent.

### Hvad er et color hint i en CSS-gradient?

En enlig procentværdi mellem to stop, som `#4c1d95, 25%, #f9a8d4`. Den flytter overgangens halvvejspunkt uden at tilføje en farve.

### Hvordan laver jeg en skarp linje i en CSS-gradient?

Giv to stop samme position, for eksempel `#0f172a 50%, #f8fafc 50%`, eller brug syntaksen med dobbelt position `#0f172a 0 50%, #f8fafc 50% 100%`.

### Hvordan får jeg en gradient til at tone glat ud til gennemsigtig?

Tilføj flere mellemliggende stop, hvis opacitet følger en ease in out-kurve. En enkel overgang med to stop viser ofte en linje, hvor den begynder.