# Repeating linear gradient i CSS: striber, ringe og mønstre

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

repeating-linear-gradient() tager et kort stykke farve og gentager det i det uendelige langs en linje. Den ene idé giver dig striber, markiser, statusbjælker og med sine radiale og koniske søskende ringe og solstråler, alt sammen uden et billede.

## The short version

- En repeating linear gradient gentager sine farvestop langs gradientlinjen, og længden af én gentagelse er positionen af det sidste stop.
- Hårde striber får du ved at give to farver samme position, så farven skifter øjeblikkeligt i stedet for at blande.
- Diagonale striber lavet med repeating-linear-gradient samles uden søm i enhver vinkel, i modsætning til en fliselagt linear gradient med background-size.
- repeating-radial-gradient() laver ringe og krusninger, og repeating-conic-gradient() laver stråler og solstråler.
- Hårde farvekanter kan se hakkede ud på skærmen, og en overgang på en halv til en pixel blødgør dem.

En **repeating linear gradient** i CSS gentager et kort stykke farvestop langs en linje, indtil elementet er fyldt. Skriv `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)`, og du får diagonale lyserøde striber på 14 pixel hver, uden en billedfil. Længden af én gentagelse bestemmes af det sidste stop, her 28px. Brug samme idé med `repeating-radial-gradient()` til ringe og `repeating-conic-gradient()` til stråler.

## Sådan virker repeating-linear-gradient()

Syntaksen er identisk med en almindelig [linear gradient](https://gradiently.design/da/guide/css-linear-gradient). Forskellen er, hvad der sker efter det sidste stop: i stedet for at holde den sidste farve starter browseren mønstret forfra. To regler gør det meste af arbejdet.

- **Den sidste stopposition er fliselængden.** Stop ved `0`, `14px` og `28px` gentages hver 28. pixel.
- **To farver på samme position giver en hård kant.** `#f472b6 0 14px, #fdf2f8 14px 28px` hopper fra lyserød til blegt lyserød ved 14px uden blanding.
- **Hvert stop kan have to positioner.** `#f472b6 0 14px` betyder ensfarvet lyserød fra 0 til 14px, hvilket er kortere end at skrive farven to gange.
- **Brug længder, ikke procenter, til striber.** Procenter er relative til gradientlinjen, så striberne strækkes, når elementet ændrer 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); }
```

Afslut den bløde gentagelse på den farve, du startede med, ellers ser du et hårdt søm hver 40. pixel.

## Stribemønstre til at kopiere

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

Seks stribemønstre. Ændr vinklen for at dreje et hvilket som helst af dem, og ændr længderne for at skalere dem; mønstret samles altid rent.

Linjeret papir er et godt eksempel på en asymmetrisk gentagelse: 22 pixel papir, én pixel streg. Samme mønster med en rød marginlinje oven på giver en overbevisende notesbog. Flere mønsteridéer, blandt andet gitre og prikker, findes i [CSS-mønstre](https://gradiently.design/da/guide/css-patterns).

## Repeating gradienter eller background-size

Du kan også lave striber med en almindelig `linear-gradient()` og `background-size`, som lægger små billeder af gradienten som fliser. Begge dele virker. De opfører sig forskelligt i vinkler.

### linear-gradient + background-size

- Fliser et rektangel, så striber på 45 grader kræver omhyggelig matematik for at passe
- Pixelnøjagtig til vandrette og lodrette striber
- Let at kombinere med andre fliser i et gitter
- Animer ved at flytte `background-position` én flise

### repeating-linear-gradient

- Gentages langs gradientlinjen, samles rent i enhver vinkel
- Stribebredden sættes direkte i pixel
- Én deklaration, ingen størrelse at holde i takt
- Animer ved at flytte `background-position` langs linjen

Til alt diagonalt skal du gribe efter den gentagende version først. Til skakternet og gitre, hvor du skal bruge to retninger på én gang, er `background-size` med lagdelte gradienter 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, der kræver `background-size`. Skakternet er den klassiske baggrund for gennemsigtighed; gitteret passer til tekniske sider og dashboards.

Skakternets anden farve starter ved position `0`. Et stop kan aldrig ligge før det forrige, så browseren flytter det op til det sted, hvor den sidste farve sluttede, hvilket giver en hård kant uden at gentage tallet. Det er en praktisk genvej i enhver gradient, gentagende eller ej.

## Ringe med repeating-radial-gradient()

Den radiale version gentages udad fra et center, så striber bliver til ringe. Flyt centret med `at` for at lave krusninger, der spreder sig fra et hjørne. Som med [radiale gradienter](https://gradiently.design/da/guide/css-radial-gradient) holder `circle` ringene runde; standardellipsen strækker dem til boksen.

- Indigoblå skive: `repeating-radial-gradient(circle at 50% 50%, #312e81 0 10px, #4338ca 10px 20px)`
- Bløde krusninger fra et hjørne: `repeating-radial-gradient(circle at 0% 100%, #fdf6ec 0, #f5d0a9 12px, #fdf6ec 24px)`
- Rav-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 radiale og to koniske gentagelser. Koniske stop er vinkler: solstrålerne gentages hver 20. grad, så der er 18 stråler af hver farve.

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

Koniske gradienter fejer rundt om et punkt, så deres stop er vinkler. Vælg en gentagelse, der går op i 360, som 20, 30 eller 45 grader, ellers får den sidste stråle en anden bredde end resten. Hold de to farver tæt på hinanden i værdi til en baggrund; stråler med høj kontrast vibrerer på skærmen og tager opmærksomheden fra alt andet. Den fulde syntaks står i [koniske CSS-gradienter](https://gradiently.design/da/guide/css-conic-gradient).

## Sådan retter du hakkede stribekanter

Hårde kanter i en vinkel kan se trappede ud, og ved nogle zoomniveauer renderer browsere dem ujævnt, så nogle få striber ser tykkere ud end andre. Løsningen er at give hver kant en bitte lille overgang i stedet for et perfekt spring.

```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 lille til at ses som en gradient, men den lader browseren anti-aliase kanten.

> **Tynde streger og skærme med høj tæthed** En streg på én pixel kan på nogle skærme blive til to pixel med halv styrke. Hvis en nålestribe ser sløret ud, så prøv et helt antal enhedspixel eller en lidt bredere streg i en blødere farve.

## En animeret frisørstang som statusbjælke

Når du flytter `background-position` præcis én gentagelse, vandrer striberne uden et hop. For et mønster på 45 grader med en gentagelse på 28px er afstanden langs den vandrette akse gentagelsen divideret med sinus til vinklen, cirka 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; }
}
```

Billedet er én gentagelse bredere end bjælken og glider til venstre præcis den gentagelse, så loopet ikke har noget hop. Violette nuancer med lav kontrast læses som aktivitet frem for alarm, og da `background-position` gentegner, bør du holde det til små elementer.

Til større animerede baggrunde, se [animerede CSS-gradienter](https://gradiently.design/da/guide/css-animated-gradient), som dækker billigere teknikker. Striber og ringe er fantastiske til detaljer, billetter og indlæsningstilstande. Til en baggrund, folk genkender som din, tilføjer Gradiently-Marks materiale, lys og korn, som et gentaget mønster ikke kan, og de renderes i enhver størrelse, du designer i.

## FAQ

### Hvad er forskellen på linear-gradient og repeating-linear-gradient?

En linear gradient holder sin sidste farve efter det sidste stop. En repeating linear gradient starter stoppene forfra, så et kort mønster fylder hele elementet.

### Hvordan laver jeg striber i CSS?

Brug hårde stop i en gentagende gradient: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` laver diagonale striber på 14 pixel.

### Hvordan sætter jeg størrelsen på en repeating gradient?

Positionen af det sidste farvestop sætter længden af én gentagelse. Brug pixellængder, så striberne har samme bredde ved enhver elementstørrelse.

### Hvorfor ser mine CSS-striber hakkede ud?

Perfekte hårde kanter i en vinkel kan give aliasing. Lad der være et mellemrum på cirka én pixel mellem hvert par stop, så browseren kan udjævne kanten.

### Kan jeg lave ringe eller stråler med repeating gradienter?

Ja. `repeating-radial-gradient()` laver ringe og `repeating-conic-gradient()` laver stråler; koniske stop er vinkler frem for længder.