# Repeating linear gradient i CSS: striper, ringer og mønstre

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

repeating-linear-gradient() tar én kort strekning med farge og gjentar den i det uendelige langs en linje. Den ene ideen gir deg striper, markiser, fremdriftslinjer og, sammen med de radielle og koniske søsknene, ringer og solstråler, helt uten bilde.

## The short version

- En repeating linear gradient gjentar fargestoppene sine langs gradientlinjen, og lengden på én gjentakelse er posisjonen til det siste stoppet.
- Skarpe striper får du ved å gi to farger samme posisjon, så fargen skifter umiddelbart i stedet for å blandes.
- Diagonale striper laget med repeating-linear-gradient møtes uten skjøt i enhver vinkel, i motsetning til en lineær gradient flislagt med background-size.
- repeating-radial-gradient() lager ringer og krusninger, og repeating-conic-gradient() lager stråler og solstråler.
- Skarpe fargekanter kan se hakkete ut på skjerm, og en overgang på en halv til én piksel gjør dem mykere.

En **repeating linear gradient** i CSS gjentar en kort rekke fargestopp langs en linje til den fyller elementet. Skriv `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)`, så får du diagonale rosa striper, hver 14 piksler brede, uten noen bildefil. Lengden på én gjentakelse bestemmes av det siste stoppet, her 28px. Bruk samme idé med `repeating-radial-gradient()` for ringer og `repeating-conic-gradient()` for stråler.

## Slik virker repeating-linear-gradient()

Syntaksen er identisk med en vanlig [lineær gradient](https://gradiently.design/nb/guide/css-linear-gradient). Forskjellen er hva som skjer etter det siste stoppet: i stedet for å holde den siste fargen starter nettleseren mønsteret på nytt. To regler gjør det meste av jobben.

- **Posisjonen til det siste stoppet er lengden på flisen.** Stopp på `0`, `14px` og `28px` gjentas hver 28. piksel.
- **To farger på samme posisjon gir en skarp kant.** `#f472b6 0 14px, #fdf2f8 14px 28px` hopper fra rosa til lys rosa ved 14px uten blanding.
- **Hvert stopp kan ta to posisjoner.** `#f472b6 0 14px` betyr helt rosa fra 0 til 14px, som er kortere enn å skrive fargen to ganger.
- **Bruk lengder, ikke prosenter, til striper.** Prosenter er relative til gradientlinjen, så stripene strekkes når elementet endrer størrelse.

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

Avslutt den myke gjentakelsen med fargen du startet med, ellers ser du en skarp skjøt hver 40. piksel.

## Stripemønstre å kopiere

- Polkagrisstriper: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)`
- Blågrønn markise: `repeating-linear-gradient(90deg, #0f766e 0 40px, #f0fdfa 40px 80px)`
- Marineblå nålestripe: `repeating-linear-gradient(90deg, #334155 0 1px, #0f172a 1px 12px)`
- Sperrebånd: `repeating-linear-gradient(135deg, #fde68a 0 10px, #1c1917 10px 20px)`
- Linjert papir: `repeating-linear-gradient(0deg, #fdf6ec 0 22px, #bfdbfe 22px 23px)`
- Fiolett i tre toner: `repeating-linear-gradient(90deg, #7c3aed 0 8px, #a78bfa 8px 16px, #ede9fe 16px 24px)`

Seks stripemønstre. Endre vinkelen for å dreie hvilket som helst av dem, og endre lengdene for å skalere dem; mønsteret møtes alltid rent.

Linjert papir er et godt eksempel på en asymmetrisk gjentakelse: 22 piksler papir, én piksel linje. Samme mønster med en rød marglinje oppå gir en troverdig notatbok. Flere mønsterideer, blant annet rutenett og prikker, finner du i [CSS-mønstre](https://gradiently.design/nb/guide/css-patterns).

## Repeterende gradienter eller background-size

Du kan også lage striper med en vanlig `linear-gradient()` og `background-size`, som flislegger et lite bilde av gradienten. Begge virker. De oppfører seg ulikt i vinkler.

### linear-gradient + background-size

- Flislegger et rektangel, så striper på 45 grader krever nøye regning for å møtes
- Pikselnøyaktig for vannrette og loddrette striper
- Lett å kombinere med andre fliser i et rutenett
- Animer ved å flytte `background-position` én flis

### repeating-linear-gradient

- Gjentas langs gradientlinjen og møtes rent i enhver vinkel
- Stripebredden settes direkte i piksler
- Én deklarasjon, ingen størrelse å holde i takt
- Animer ved å flytte `background-position` langs linjen

For alt som er diagonalt, gå til den repeterende versjonen først. For sjakkbrett og rutenett, der du trenger to retninger samtidig, er `background-size` med gradienter i lag enklere.

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

To mønstre som trenger `background-size`. Sjakkbrettet er den klassiske bakgrunnen for gjennomsiktighet; rutenettet passer til tekniske sider og dashbord.

Den andre fargen i sjakkbrettet starter på posisjon `0`. Et stopp kan aldri ligge før det forrige, så nettleseren flytter det opp til der den forrige fargen sluttet, og det gir en skarp kant uten å gjenta tallet. Det er en praktisk snarvei i enhver gradient, repeterende eller ikke.

## Ringer med repeating-radial-gradient()

Den radielle versjonen gjentas utover fra et sentrum, så striper blir ringer. Flytt sentrum med `at` for å lage krusninger som brer seg fra et hjørne. Som med [radielle gradienter](https://gradiently.design/nb/guide/css-radial-gradient) holder `circle` ringene runde; standardellipsen strekker dem etter boksen.

- Indigo blink: `repeating-radial-gradient(circle at 50% 50%, #312e81 0 10px, #4338ca 10px 20px)`
- Myke krusninger fra et hjørne: `repeating-radial-gradient(circle at 0% 100%, #fdf6ec 0, #f5d0a9 12px, #fdf6ec 24px)`
- Ravgule solstråler: `repeating-conic-gradient(from 0deg, #f59e0b 0deg 10deg, #fde68a 10deg 20deg)`
- Lave stråler fra gulvet: `repeating-conic-gradient(from 0deg at 50% 100%, #0f172a 0deg 6deg, #1e293b 6deg 12deg)`

To radielle og to koniske gjentakelser. Koniske stopp er vinkler: solstrålene gjentas hver 20. grad, så det blir 18 stråler av hver farge.

## Stråler med repeating-conic-gradient()

Koniske gradienter sveiper rundt et punkt, så stoppene deres er vinkler. Velg en gjentakelse som går opp i 360, som 20, 30 eller 45 grader, ellers får den siste strålen en annen bredde enn resten. Hold de to fargene nær hverandre i valør til en bakgrunn; stråler med høy kontrast vibrerer på skjermen og trekker oppmerksomheten fra alt annet. Hele syntaksen står i [koniske gradienter i CSS](https://gradiently.design/nb/guide/css-conic-gradient).

## Slik fikser du hakkete stripekanter

Skarpe kanter i vinkel kan se trappete ut, og på noen zoomnivåer tegner nettlesere dem ujevnt, så noen striper ser tykkere ut enn andre. Løsningen er å gi hver kant en bitteliten overgang i stedet for et perfekt hopp.

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

Blandingen er for liten til å ses som en gradient, men den lar nettleseren kantutjevne kanten.

> **Tynne linjer og skjermer med høy tetthet** En linje på én piksel kan tegnes som to piksler med halv styrke på enkelte skjermer. Ser en nålestripe uskarp ut, prøv et helt antall enhetspiksler eller en litt bredere linje i en mykere farge.

## En animert fremdriftslinje som en barberstang

Når du flytter `background-position` nøyaktig én gjentakelse, vandrer stripene uten hopp. For et mønster på 45 grader med en gjentakelse på 28px er avstanden langs den vannrette aksen gjentakelsen delt på sinus til vinkelen, omtrent 39,6 px.

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

Bildet er én gjentakelse bredere enn linjen og glir mot venstre med nøyaktig den gjentakelsen, så loopen har ingen hopp. Fiolette toner med lav kontrast leses som aktivitet, ikke alarm, og siden `background-position` maler på nytt, bør du holde det til små elementer.

For større animerte bakgrunner, se [animerte gradienter i CSS](https://gradiently.design/nb/guide/css-animated-gradient), som tar for seg billigere teknikker. Striper og ringer er flotte til detaljer, billetter og lastetilstander. For en bakgrunn folk kjenner igjen som din, tilfører Marks fra Gradiently materiale, lys og korn som et repeterende mønster ikke kan, og de gjengis i alle størrelser du designer i.

## FAQ

### Hva er forskjellen på linear-gradient og repeating-linear-gradient?

En lineær gradient holder den siste fargen etter det siste stoppet. En repeating linear gradient starter stoppene på nytt, så et kort mønster fyller hele elementet.

### Hvordan lager jeg striper i CSS?

Bruk skarpe stopp i en repeterende gradient: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` gir diagonale striper på 14 piksler.

### Hvordan bestemmer jeg størrelsen på en repeterende gradient?

Posisjonen til det siste fargestoppet bestemmer lengden på én gjentakelse. Bruk lengder i piksler, så stripene har samme bredde uansett elementets størrelse.

### Hvorfor ser CSS-stripene mine hakkete ut?

Perfekt skarpe kanter i vinkel kan bli trappete. La det være et mellomrom på omtrent én piksel mellom hvert par av stopp, så nettleseren kan glatte kanten.

### Kan jeg lage ringer eller stråler med repeterende gradienter?

Ja. `repeating-radial-gradient()` lager ringer og `repeating-conic-gradient()` lager stråler; koniske stopp er vinkler i stedet for lengder.