# CSS lineair kleurverloop: de complete gids voor linear-gradient()

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

Elk onderdeel van linear-gradient() uitgelegd met een levend voorbeeld naast de code, van de standaardrichting tot harde stops, gelaagde glans en vloeiender OKLCH-overgangen.

## The short version

- Een CSS lineair kleurverloop is een afbeelding die de browser langs een rechte lijn tekent, geschreven met de functie linear-gradient() en gebruikt overal waar een afbeelding is toegestaan, meestal background-image.
- Zonder richting loopt een lineair kleurverloop van boven naar beneden, hetzelfde als 180deg; 0deg wijst omhoog en hoeken draaien met de klok mee.
- Kleurstops zonder posities worden gelijkmatig verdeeld en twee stops op dezelfde positie maken een harde rand in plaats van een overgang.
- Meerdere kleurverlopen kunnen in één background-image worden gelaagd, gescheiden door komma’s, waarbij de eerste bovenaan wordt getekend.
- Een interpolatiemethode zoals in oklch toevoegen houdt het midden van een overgang helder in plaats van het grijs te laten worden.

Een **CSS lineair kleurverloop** is een afbeelding die de browser langs een rechte lijn tekent en waarbij de ene kleur in de volgende overloopt. Je schrijft het met de functie `linear-gradient()` en gebruikt het overal waar CSS een afbeelding accepteert, meestal `background-image`. Het heeft geen bestand nodig, schaalt naar elk formaat zonder te vervagen en kost niets om te downloaden. De kortste bruikbare versie zijn twee kleuren: `linear-gradient(#0f172a, #38bdf8)` loopt van diep marineblauw bovenaan naar hemelsblauw onderaan.

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

Het eenvoudigste lineaire kleurverloop: twee kleuren, standaardrichting, met een vlakke kleur eronder als terugval.

Marine naar hemel, van boven naar beneden: `linear-gradient(#0f172a, #38bdf8)`

De code hierboven, gerenderd. Geen richting betekent van boven naar beneden.

Deze gids loopt door elk onderdeel van de functie in de volgorde waarin je het tegenkomt. Wil je het bredere beeld van hoe lineaire kleurverlopen zich verhouden tot radiale, conic en mesh-overgangen, begin dan bij [de soorten kleurverlopen](https://gradiently.design/nl/guide/types-of-gradients).

## De syntaxis van linear-gradient()

De functie neemt een optionele richting, een optionele kleurinterpolatiemethode en dan een lijst van minstens twee kleurstops. Alles wordt door komma’s gescheiden behalve de richting en de interpolatiemethode, die het eerste argument delen.

| Onderdeel | Voorbeeld | Wat het doet |
| --- | --- | --- |
| Richting als hoek | `135deg`, `0.25turn` | Stelt de hoek van de lijn van het kleurverloop in. 0deg wijst omhoog, hoeken draaien met de klok mee. |
| Richting als sleutelwoorden | `to right`, `to top left` | Richt de lijn op een zijde of hoek van het vak. |
| Interpolatiemethode | `in oklch`, `in srgb` | Kiest de kleurruimte waarin de overgang wordt berekend. |
| Kleurstop | `#38bdf8 40%` | Een kleur, eventueel met een of twee posities langs de lijn. |
| Kleurhint | `30%` tussen twee stops | Verplaatst het middelpunt van de overgang tussen zijn buren. |

De onderdelen van linear-gradient(), in de volgorde waarin ze verschijnen. Alleen de kleurstops zijn verplicht.

De volledige referentie staat op de [linear-gradient()-pagina van MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient), die ook de exacte grammatica uit de CSS Images-specificatie documenteert.

## Kleurverloophoeken en richtingssleutelwoorden

Hoeken volgen een kompas: `0deg` wijst omhoog, `90deg` naar rechts, `180deg` omlaag en `270deg` naar links. Het kleurverloop begint aan de tegenovergestelde kant en reist naar de richting die je geeft, dus `90deg` loopt van links naar rechts. Je kunt ook `turn`, `rad` of `grad` schrijven, waarbij `0.25turn` gelijk is aan `90deg`. De standaard, als je niets opgeeft, is `to bottom`.

- 0deg: van onder naar boven: `linear-gradient(0deg, #1e1b4b, #f472b6)`
- 90deg: van links naar rechts: `linear-gradient(90deg, #1e1b4b, #f472b6)`
- 180deg: de standaard: `linear-gradient(180deg, #1e1b4b, #f472b6)`
- 135deg: linksboven naar rechtsonder: `linear-gradient(135deg, #1e1b4b, #f472b6)`

Eén paar indigo naar roze op vier hoeken. De eerste kleur zit altijd aan het begin van de lijn.

Hoeksleutelwoorden zijn niet hetzelfde als hoeken van 45 graden. `to top right` kantelt de lijn zo dat de middenkleur precies tussen de andere twee hoeken loopt, wat de vorm van het vak ook is. Op een brede banner is die lijn veel vlakker dan `45deg`, dat altijd op 45 graden wijst en de vorm van het vak negeert. Gebruik sleutelwoorden als de overgang de hoeken moet respecteren en hoeken als meerdere elementen van verschillende vorm één richting moeten delen. Meer over richtingen kiezen staat in [kleurverloophoeken](https://gradiently.design/nl/guide/gradient-angle).

> **Waarom de hoeken altijd kloppen** De lijn van het kleurverloop wordt uitgerekt zodat zijn eerste en laatste kleur precies in de hoeken landen. Voor een vak met breedte W en hoogte H op hoek A is zijn lengte `abs(W × sin A) + abs(H × cos A)`. Daarom lijkt een kleurverloop van 135deg op een heel breed element bijna horizontaal.

## Kleurstops, posities en hints

Stops zonder posities worden gelijkmatig verdeeld, dus drie kleuren zitten op 0%, 50% en 100%. Geef een stop een positie in procenten of een lengte om hem te verplaatsen. Geef hem twee posities en de kleur blijft effen ertussen. Zet een los percentage tussen twee stops en het wordt een hint: het punt waar de overgang zijn halve kleur bereikt, waardoor de ene kant van de overgang sneller gaat dan de andere.

```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);
```

Drie manieren om dezelfde overgang te vormen. Posities kunnen ook lengtes zijn, zoals 120px.

- Gelijke verdeling: `linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff)`
- Hint op 20%: `linear-gradient(90deg, #0c4a6e, 20%, #22d3ee)`
- Vastgehouden band, 35% tot 65%: `linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff)`

Hetzelfde palet van diepe oceaan naar ijs, op drie manieren gevormd met posities en hints.

## Harde stops voor strepen en splitsingen

Als twee stops een positie delen, is er geen ruimte om te mengen, dus krijg je een scherpe rand. Browsers zetten ook een stop vast die eerder komt dan de vorige, wat een handige sluiproute geeft: `#f97316 50%, #1e293b 0` betekent dat de tweede kleur precies begint waar de eerste eindigt. Herhaal het idee met `repeating-linear-gradient()` en je hebt strepen.

- Half om half gesplitst: `linear-gradient(90deg, #f97316 50%, #1e293b 0)`
- Drie amberbanden: `linear-gradient(180deg, #fde68a 0 33%, #f59e0b 0 66%, #b45309 0)`
- Diagonale waarschuwingsstrepen: `repeating-linear-gradient(45deg, #1e293b 0 12px, #f97316 12px 24px)`

Harde stops tekenen vormen in plaats van overgangen. Er zijn er veel meer in [CSS-patronen](https://gradiently.design/nl/guide/css-patterns).

## Meerdere kleurverlopen in één achtergrond lagen

`background-image` accepteert een lijst gescheiden door komma’s en de eerste afbeelding wordt bovenaan geschilderd. Lagen schijnen alleen door elkaar waar ze transparant zijn, dus de bovenste kleurverlopen vervagen meestal naar `transparent`. Moderne browsers mengen in premultiplied alpha, dus vervagen naar `transparent` trekt niet langer een grijze tint in de kleur zoals ooit. Combineer lagen met `background-size` en `background-repeat` als een laag maar een deel van het vak moet dekken.

```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);
}
```

Een glans gelaagd over een basiskleurverloop. Het eerste kleurverloop in de lijst wordt bovenaan getekend.

Stapelen is ook de basis van rijkere effecten: gelaagde radiale gloeden maken een [mesh gradient in CSS](https://gradiently.design/nl/guide/css-mesh-gradient), en een dunne ruislaag erbovenop verbergt trapvorming, zoals uitgelegd in [kleurverloopbanding](https://gradiently.design/nl/guide/gradient-banding).

## Vloeiender overgangen met kleurinterpolatie

Als elke kleur in een verouderd formaat als hex, `rgb()` of `hsl()` is geschreven, mengt de browser in sRGB voor achterwaartse compatibiliteit. sRGB-overgangen tussen verre tinten gaan door doffe, grijzige middens: blauw naar geel is het klassieke geval. `in oklab` of `in oklch` toevoegen vraagt om een perceptuele kleurruimte, die het midden lichter en gelijkmatiger houdt. De speciale gids over [OKLCH-kleurverlopen in CSS](https://gradiently.design/nl/guide/css-gradient-oklch) behandelt tintrichtingen en terugvallen.

- Standaard sRGB: grijs midden: `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab: schoner midden: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch: reist door de tint: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Blauw naar geel op drie manieren. Alleen de interpolatiemethode verandert.

### Vermijden

- Lange overgangen tussen tegenovergestelde tinten in gewoon sRGB
- `to top right` als meerdere kaarten van verschillende vorm één richting moeten delen
- Vervagen naar `white` als je wegvagen bedoelt; gebruik `transparent`
- Heel vloeiende, donkere, brede overgangen zonder korrel, die op veel schermen banden vormen

### Doen

- `in oklch` of een middenstop toevoegen om overgangen levendig te houden
- Eén hoek gebruiken, zoals `135deg`, voor een consistent systeem
- Lagen laten vervagen naar `transparent` zodat wat eronder ligt zichtbaar is
- Een vage ruislaag toevoegen over grote donkere kleurverlopen

## Browserondersteuning en terugvallen

`linear-gradient()` werkt zonder voorvoegsel in elke huidige browser, dus de oude `-webkit-`-versies kunnen weg. Interpolatiemethoden, stops met twee posities en hints zijn nieuwer; kijk op [caniuse](https://caniuse.com/css-gradients) voor de details. Het veiligste patroon is eerst een vlakke `background-color`, dan het kleurverloop, dan een verbeterde versie in een latere declaratie, die oudere browsers overslaan omdat ze hem niet kunnen lezen.

```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);
}
```

Progressive enhancement: elke regel overschrijft de vorige alleen als de browser hem begrijpt.

Begin je liever bij een overgang die al karakter heeft dan stops met de hand te tunen, dan bespaart een [kleurverloopgenerator](https://gradiently.design/nl/guide/gradient-generator) of een bibliotheek met kant-en-klare achtergronden tijd. Hoe dan ook, houd de code: een kleurverloop in CSS blijft op elk formaat scherp en weegt een paar bytes.

## FAQ

### Hoe maak ik een lineair kleurverloop in CSS?

Zet `background-image: linear-gradient(richting, kleur1, kleur2)` op een element, bijvoorbeeld `linear-gradient(90deg, #0f172a, #38bdf8)`. Voeg er een `background-color` voor toe als terugval.

### Wat is de standaardrichting van een CSS lineair kleurverloop?

Van boven naar beneden, hetzelfde als `to bottom` of `180deg`. De eerste kleur staat bovenaan en de laatste onderaan.

### Hoe maak ik een harde lijn in een lineair kleurverloop?

Geef twee naburige stops dezelfde positie, zoals `#f97316 50%, #1e293b 50%`, of gebruik `0` als tweede positie zodat die aan de vorige stop wordt vastgezet.

### Waarom ziet het midden van mijn kleurverloop er grijs uit?

Hexkleuren mengen standaard in sRGB, wat het middelpunt tussen verre tinten dof maakt. Voeg `in oklch` of `in oklab` toe na de hoek, of voeg een helderdere middenstop in.

### Is 45deg hetzelfde als to top right?

Alleen op een vierkant. `45deg` wijst altijd op 45 graden, terwijl `to top right` zijn hoek aanpast zodat de middenkleur tussen de andere twee hoeken van het vak loopt.