# Gradient color stops: kleuren plaatsen voor soepele verlopen

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

Twee verlopen met dezelfde kleuren kunnen totaal anders ogen. Het verschil zit in waar de stops staan en hoe de overgang ertussen loopt. Dit is het deel van een verloop dat de meeste mensen nooit aanraken.

## The short version

- Gradient color stops zijn de punten langs een verloop waar een bepaalde kleur wordt bereikt, geschreven als een kleur gevolgd door een positie, zoals `#7c3aed 40%`.
- Stops zonder positie worden gelijkmatig verdeeld, wat zelden de natuurlijkste keuze is.
- Een colour hint is een los percentage tussen twee stops dat het middelpunt van hun overgang verschuift zonder een kleur toe te voegen.
- Twee stops op dezelfde positie geven een harde rand, zo maak je strepen en scherpe banden in CSS.
- Meerdere tussenstops die een easingcurve volgen halen de zichtbare rand weg waar een lineaire fade begint en eindigt.

**Gradient color stops** zijn de punten waar een verloop een bepaalde kleur bereikt. In CSS is elke stop een kleur met een optionele positie, zoals `#7c3aed 40%`, en de browser mengt in een rechte lijn tussen aangrenzende stops. Waar je ze plaatst bepaalt bijna alles: of een overgang soepel of abrupt aanvoelt, of één kleur domineert en of het oog een naad ziet waar een fade begint. Stops verschuiven is vaak een grotere verbetering dan kleuren veranderen.

## Hoe gradient color stops werken

Een verloopslijn loopt van 0 procent tot 100 procent. Elke stop pint een kleur vast op een punt van die lijn. Laat je de posities weg, dan verdeelt de browser de stops gelijkmatig, dus drie kleuren landen op 0, 50 en 100 procent. Tussen elk paar verandert de kleur in een constant tempo. De volledige syntaxis staat in de [linear-gradient()-referentie van MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

| Wat je schrijft | Wat er gebeurt |
| --- | --- |
| `#1e3a8a, #f472b6` | Twee stops op 0% en 100% |
| `#1e3a8a 20%, #f472b6 80%` | Effen marineblauw tot 20%, overgang, effen roze na 80% |
| `#1e3a8a, 30%, #f472b6` | Een colour hint: het middelpunt schuift naar 30% |
| `#1e3a8a 50%, #f472b6 50%` | Een harde rand in het midden, geen overgang |
| `#1e3a8a 0 40%, #f472b6 40% 100%` | Dubbele positie: twee effen banden |
| `#1e3a8a 10px, #f472b6 200px` | Lengtes werken net als percentages |

Stopsyntaxis in CSS. Dezelfde ideeën gelden in Figma, Photoshop en elke verloopeditor, alleen dan met schuifjes.

## Waarom gelijkmatig verdeelde stops kunstmatig ogen

Echt licht verandert zelden in een gelijkmatig tempo. Een zonsondergang is vooral één kleur met een smalle band verandering bij de horizon; een schaduw is vooral middentoon met een korte daling aan de rand. Gelijkmatige verdeling geeft elke kleur hetzelfde aandeel, wat als een grafiek leest. Bepaal welke kleur leidt en laat die het grootste deel van de ruimte houden.

- Gelijk: 0, 50, 100: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 50%, #be123c 100%)`
- Gewogen: blauw leidt: `linear-gradient(180deg, #0c4a6e 0%, #0e7490 58%, #f59e0b 84%, #be123c 100%)`
- Gewogen: warme top: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 22%, #be123c 40%, #4c0519 100%)`

Eén palet, drie plaatsingen. De gewogen versies voelen als een lucht op twee momenten; de gelijkmatige voelt gegenereerd.

## Colour hints: het middelpunt verschuiven

Een colour hint is een los percentage tussen twee stops. Het voegt geen kleur toe; het verschuift het punt waar de overgang precies halverwege is. Een hint op 20 procent betekent dat de kleur haar middelpunt vroeg bereikt, zodat de tweede kleur snel arriveert en dan blijft hangen. Hints zijn de goedkoopste manier om een verloop van twee kleuren minder mechanisch te laten aanvoelen.

- Geen hint, middelpunt 50%: `linear-gradient(90deg, #4c1d95, #f9a8d4)`
- Hint op 25%: `linear-gradient(90deg, #4c1d95, 25%, #f9a8d4)`
- Hint op 75%: `linear-gradient(90deg, #4c1d95, 75%, #f9a8d4)`

Hetzelfde violet naar roze. De hint verschuiven laat één kleur domineren zonder een van beide aan te passen.

## Harde stops voor strepen en banden

Delen twee stops een positie, dan is er geen afstand om over te mengen en verandert de kleur direct. Zo teken je strepen, gesplitste achtergronden, voortgangsbalken en vlaggen met niets dan een verloop. De syntaxis met dubbele positie, `kleur begin einde`, maakt het korter om te schrijven. Herhalende verlopen nemen hetzelfde idee en leggen het in tegels, behandeld in [repeterende lineaire verlopen](https://gradiently.design/nl/guide/css-repeating-gradient).

- Half om half: `linear-gradient(90deg, #0f172a 0 50%, #f8fafc 50% 100%)`
- Drie banden: `linear-gradient(180deg, #fde68a 0 33%, #fb923c 33% 66%, #e11d48 66% 100%)`
- Diagonale stappen: `linear-gradient(135deg, #312e81 0 40%, #6d28d9 40% 60%, #c084fc 60% 100%)`

Harde stops in actie. Geen overgang, alleen randen.

## Eased stops: de naad wegwerken

Een lineaire overgang heeft een zichtbaar begin en einde. Laat je een donkere scrim over een foto naar transparant uitlopen, dan zie je vaak een lijn waar de fade begint, omdat het veranderingstempo van nul naar volle snelheid springt. Meerdere tussenstops langs een easingcurve lossen het op: de kleur begint langzaam te veranderen, versnelt en komt dan tot rust. Dat is vooral nuttig voor overlays achter tekst en voor [transparante verlopen](https://gradiently.design/nl/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%);
}
```

Beide scrims eindigen even sterk. De eased heeft geen lijn waar hij begint.

> **Hetzelfde idee in beweging** Eased stops zijn de verloopversie van een easingcurve in animatie. [Easing](https://gradiently.design/nl/guide/easing) legt uit waarom ease in out natuurlijk voelt, en dezelfde redenering geldt hier.

## Stops plaatsen: een praktische methode

1. **Kies de leidende kleur** Geef hem 50 tot 70 procent van de lijn. Hij zet de sfeer.
2. **Plaats de verandering waar het oog heen moet** Zet de snelste kleurverandering bij het brandpunt, niet standaard in het midden.
3. **Voeg hints toe voordat je kleuren toevoegt** Voelt een overgang niet goed, probeer dan eerst het middelpunt te verschuiven. Extra kleuren voegen complexiteit toe.
4. **Controleer de middelpunten** Kijk naar de kleur halverwege elk paar. Is die grijs, voeg dan een brug toe of meng in OKLCH, zoals uitgelegd in [gradient interpolation](https://gradiently.design/nl/guide/gradient-interpolation).
5. **Laat lange fades uitlopen met easing** Voeg voor alles wat naar transparant of een egale kleur uitloopt tussenstops toe, zodat er geen naad is.

### Vermijd

- Elke kleur een gelijk aandeel
- Een nieuwe kleur om elk probleem op te lossen
- Lineaire fades naar transparant achter tekst
- Harde stops waar je zachte overgangen bedoelde

### Doe

- Eén leidende kleur, de andere komen laat
- Colour hints om een overgang te verschuiven
- Eased stops voor scrims en fades
- Harde stops alleen voor strepen en banden

Wil je stops in hun eenvoudigste vorm zien, dan loopt [CSS lineaire verlopen](https://gradiently.design/nl/guide/css-linear-gradient) de volledige syntaxis door en toont [soorten verlopen](https://gradiently.design/nl/guide/types-of-gradients) hoe stops zich in radiale en conische verlopen gedragen. In Gradiently regelt een Mark zijn eigen overgangen en licht op elk formaat, dus je kunt meteen ontwerpen en de tijd aan de woorden besteden.

## FAQ

### Wat is een gradient color stop?

Een punt langs een verloop waar een bepaalde kleur wordt bereikt, in CSS geschreven als een kleur met een optionele positie, zoals `#7c3aed 40%`.

### Wat gebeurt er als ik stops geen positie geef?

De browser verdeelt ze gelijkmatig van 0 tot 100 procent. Drie kleuren landen op 0, 50 en 100 procent.

### Wat is een colour hint in een CSS-verloop?

Een los percentage tussen twee stops, zoals `#4c1d95, 25%, #f9a8d4`. Het verschuift het halverwegepunt van de overgang zonder een kleur toe te voegen.

### Hoe maak ik een harde lijn in een CSS-verloop?

Geef twee stops dezelfde positie, bijvoorbeeld `#0f172a 50%, #f8fafc 50%`, of gebruik de syntaxis met dubbele positie `#0f172a 0 50%, #f8fafc 50% 100%`.

### Hoe laat ik een verloop vloeiend naar transparant uitlopen?

Voeg meerdere tussenstops toe waarvan de dekking een ease-in-out-curve volgt. Een eenvoudige fade met twee stops toont vaak een lijn waar hij begint.