# Herhalend lineair verloop in CSS: strepen, ringen en patronen

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

repeating-linear-gradient() neemt één korte reeks kleur en tegelt die eindeloos langs een lijn. Dat ene idee geeft je strepen, luifels, voortgangsbalken en, met de radiale en conische varianten, ringen en zonnestralen, allemaal zonder afbeelding.

## The short version

- Een herhalend lineair verloop herhaalt zijn kleurstops langs de verloopslijn, en de lengte van één herhaling is de positie van de laatste stop.
- Harde strepen ontstaan door twee kleuren dezelfde positie te geven, zodat de kleur direct wisselt in plaats van te mengen.
- Diagonale strepen met repeating-linear-gradient sluiten onder elke hoek naadloos aan, anders dan een getegeld lineair verloop met background-size.
- repeating-radial-gradient() maakt ringen en rimpelingen, en repeating-conic-gradient() maakt stralen en zonnestralen.
- Harde kleurranden kunnen op het scherm getand ogen, en een overgang van een halve tot een hele pixel maakt ze zachter.

Een **herhalend lineair verloop** in CSS herhaalt een korte reeks kleurstops langs een lijn tot het element gevuld is. Schrijf `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` en je krijgt diagonale roze strepen van elk 14 pixels breed, zonder afbeeldingsbestand. De lengte van één herhaling wordt bepaald door de laatste stop, hier 28px. Gebruik hetzelfde idee met `repeating-radial-gradient()` voor ringen en `repeating-conic-gradient()` voor stralen.

## Hoe repeating-linear-gradient() werkt

De syntaxis is gelijk aan een gewoon [lineair verloop](https://gradiently.design/nl/guide/css-linear-gradient). Het verschil is wat er na de laatste stop gebeurt: in plaats van de laatste kleur aan te houden begint de browser het patroon opnieuw. Twee regels doen het meeste werk.

- **De positie van de laatste stop is de tegellengte.** Stops op `0`, `14px` en `28px` herhalen elke 28 pixels.
- **Twee kleuren op dezelfde positie maken een harde rand.** `#f472b6 0 14px, #fdf2f8 14px 28px` springt bij 14px van roze naar lichtroze zonder menging.
- **Elke stop kan twee posities hebben.** `#f472b6 0 14px` betekent effen roze van 0 tot 14px, wat korter is dan de kleur twee keer schrijven.
- **Gebruik lengtes, geen percentages, voor strepen.** Percentages zijn relatief aan de verloopslijn, dus strepen rekken uit als het element van grootte verandert.

```css
/* Soft repeat: colours blend within each 40px band */
.soft { background-image: repeating-linear-gradient(90deg, #ede9fe 0px, #c4b5fd 20px, #ede9fe 40px); }

/* Hard stripes: two colours share each boundary */
.stripes { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Uneven stripes: wide band, thin band */
.ticket { background-image: repeating-linear-gradient(90deg, #0f766e 0 36px, #f0fdfa 36px 40px); }
```

Eindig de zachte herhaling op de kleur waarmee je begon, anders zie je elke 40 pixels een harde naad.

## Streeppatronen om te kopiëren

- Zuurstokstrepen: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)`
- Groenblauwe luifel: `repeating-linear-gradient(90deg, #0f766e 0 40px, #f0fdfa 40px 80px)`
- Marineblauwe krijtstreep: `repeating-linear-gradient(90deg, #334155 0 1px, #0f172a 1px 12px)`
- Waarschuwingslint: `repeating-linear-gradient(135deg, #fde68a 0 10px, #1c1917 10px 20px)`
- Gelinieerd papier: `repeating-linear-gradient(0deg, #fdf6ec 0 22px, #bfdbfe 22px 23px)`
- Driekleurig violet: `repeating-linear-gradient(90deg, #7c3aed 0 8px, #a78bfa 8px 16px, #ede9fe 16px 24px)`

Zes streeppatronen. Verander de hoek om ze te draaien en de lengtes om ze te schalen; het patroon sluit altijd netjes aan.

Gelinieerd papier is een goed voorbeeld van een asymmetrische herhaling: 22 pixels papier, één pixel lijn. Hetzelfde patroon met een rode kantlijn erbovenop geeft een overtuigend schrift. Meer patroonideeën, waaronder rasters en stippen, staan in [CSS-patronen](https://gradiently.design/nl/guide/css-patterns).

## Herhalende verlopen of background-size

Je kunt strepen ook maken met een gewoon `linear-gradient()` en `background-size`, wat een klein beeld van het verloop tegelt. Beide werken. Ze gedragen zich anders onder hoeken.

### linear-gradient + background-size

- Tegelt een rechthoek, dus strepen van 45 graden vragen om zorgvuldig rekenwerk om aan te sluiten
- Pixelnauwkeurig voor horizontale en verticale strepen
- Makkelijk te combineren met andere tegels in een raster
- Animeer door `background-position` één tegel te verschuiven

### repeating-linear-gradient

- Herhaalt langs de verloopslijn, sluit onder elke hoek netjes aan
- Streepbreedte direct in pixels ingesteld
- Eén declaratie, geen grootte om gelijk te houden
- Animeer door `background-position` langs de lijn te verschuiven

Reik voor alles wat diagonaal is eerst naar de herhalende versie. Voor dambordpatronen en rasters, waar je twee richtingen tegelijk nodig hebt, is `background-size` met gelaagde verlopen eenvoudiger.

```css
.checker {
  background-image: repeating-conic-gradient(#e7e5e4 0 25%, #fafaf9 0 50%);
  background-size: 24px 24px;
}

.grid {
  background-color: #0f172a;
  background-image:
    linear-gradient(#1e293b 1px, transparent 1px),
    linear-gradient(90deg, #1e293b 1px, transparent 1px);
  background-size: 32px 32px;
}
```

Twee patronen die `background-size` nodig hebben. Het dambord is de klassieke transparantieachtergrond; het raster past bij technische pagina’s en dashboards.

De tweede kleur van het dambord begint op positie `0`. Een stop kan nooit vóór de vorige liggen, dus de browser schuift hem op naar waar de laatste kleur eindigde, wat een harde rand maakt zonder het getal te herhalen. Het is een handige afkorting in elk verloop, herhalend of niet.

## Ringen met repeating-radial-gradient()

De radiale versie herhaalt naar buiten vanuit een middelpunt, dus strepen worden ringen. Verplaats het middelpunt met `at` om rimpelingen vanuit een hoek te maken. Net als bij [radiale verlopen](https://gradiently.design/nl/guide/css-radial-gradient) houdt `circle` ringen rond; de standaard ellips rekt ze uit naar de box.

- Indigo schietschijf: `repeating-radial-gradient(circle at 50% 50%, #312e81 0 10px, #4338ca 10px 20px)`
- Zachte rimpelingen vanuit een hoek: `repeating-radial-gradient(circle at 0% 100%, #fdf6ec 0, #f5d0a9 12px, #fdf6ec 24px)`
- Amberkleurige zonnestraal: `repeating-conic-gradient(from 0deg, #f59e0b 0deg 10deg, #fde68a 10deg 20deg)`
- Lage stralen vanaf de vloer: `repeating-conic-gradient(from 0deg at 50% 100%, #0f172a 0deg 6deg, #1e293b 6deg 12deg)`

Twee radiale en twee conische herhalingen. Conische stops zijn hoeken: de zonnestraal herhaalt elke 20 graden, dus heeft 18 stralen van elke kleur.

## Stralen met repeating-conic-gradient()

Conische verlopen vegen rond een punt, dus hun stops zijn hoeken. Kies een herhaling die netjes in 360 past, zoals 20, 30 of 45 graden, anders is de laatste straal anders breed dan de rest. Houd de twee kleuren dicht bij elkaar in waarde voor een achtergrond; stralen met hoog contrast trillen op het scherm en trekken de aandacht van al het andere. De volledige syntaxis staat in [conische CSS-verlopen](https://gradiently.design/nl/guide/css-conic-gradient).

## Getande strepenranden herstellen

Harde randen onder een hoek kunnen getrapt ogen, en bij sommige zoomniveaus renderen browsers ze ongelijk, waardoor een paar strepen dikker lijken dan andere. De oplossing is elke rand een piepkleine overgang te geven in plaats van een perfecte sprong.

```css
/* Jagged: a perfect hard edge */
.hard { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Smoother: one pixel of blend at each edge */
.smooth {
  background-image: repeating-linear-gradient(
    45deg,
    #f472b6 0 13.5px,
    #fdf2f8 14.5px 27.5px,
    #f472b6 28.5px
  );
}
```

De menging is te klein om als verloop te zien, maar laat de browser de rand antialiassen.

> **Dunne lijnen en schermen met hoge dichtheid** Een lijn van één pixel kan op sommige schermen als twee pixels met halve sterkte renderen. Ziet een krijtstreep er wazig uit, probeer dan een geheel aantal apparaatpixels of een iets bredere lijn in een zachtere kleur.

## Een geanimeerde kapperspaal-voortgangsbalk

`background-position` met precies één herhaling verschuiven laat strepen zonder sprong reizen. Voor een patroon van 45 graden met een herhaling van 28px is de afstand langs de horizontale as de herhaling gedeeld door de sinus van de hoek, ongeveer 39,6px.

```css
.progress {
  background-image: repeating-linear-gradient(45deg, #6d28d9 0 14px, #8b5cf6 14px 28px);
  /* one horizontal repeat wider than the bar, so it can slide */
  background-size: calc(100% + 39.6px) 100%;
  background-repeat: no-repeat;
  animation: stripes 1s linear infinite;
}

@keyframes stripes {
  from { background-position: 0 0; }
  to { background-position: -39.6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .progress { animation: none; }
}
```

Het beeld is één herhaling breder dan de balk en schuift precies die herhaling naar links, dus de lus heeft geen sprong. Violetten met laag contrast lezen als activiteit in plaats van alarm, en omdat `background-position` opnieuw tekent, houd je het bij kleine elementen.

Voor grotere geanimeerde achtergronden, zie [geanimeerde CSS-verlopen](https://gradiently.design/nl/guide/css-animated-gradient), dat goedkopere technieken behandelt. Strepen en ringen zijn geweldig voor details, kaartjes en laadstaten. Voor een achtergrond die mensen als de jouwe herkennen, voegen de Marks van Gradiently materiaal, licht en korrel toe die een herhalend patroon niet kan, en ze renderen op elk formaat waarin je ontwerpt.

## FAQ

### Wat is het verschil tussen linear-gradient en repeating-linear-gradient?

Een lineair verloop houdt zijn laatste kleur aan na de laatste stop. Een herhalend lineair verloop begint de stops opnieuw, dus een kort patroon vult het hele element.

### Hoe maak ik strepen in CSS?

Gebruik harde stops in een herhalend verloop: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` maakt diagonale strepen van 14 pixels.

### Hoe stel ik de grootte van een herhalend verloop in?

De positie van de laatste kleurstop bepaalt de lengte van één herhaling. Gebruik pixellengtes zodat strepen op elke elementgrootte even breed blijven.

### Waarom zien mijn CSS-strepen er getand uit?

Perfecte harde randen onder een hoek kunnen aliasen. Laat ongeveer één pixel ruimte tussen elk paar stops zodat de browser de rand kan afvlakken.

### Kan ik ringen of stralen maken met herhalende verlopen?

Ja. `repeating-radial-gradient()` maakt ringen en `repeating-conic-gradient()` maakt stralen; conische stops zijn hoeken in plaats van lengtes.