# Upprepande linjär gradient i CSS: ränder, ringar och mönster

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

repeating-linear-gradient() tar en kort följd av färg och kakelsätter den i all oändlighet längs en linje. Den enda idén ger dig ränder, markiser, förloppsstaplar och, med sina radiella och koniska syskon, ringar och solstrålar, allt utan bild.

## The short version

- En repeating linear gradient upprepar sina färgstopp längs gradientlinjen, och längden på en upprepning är positionen för det sista stoppet.
- Hårda ränder får du genom att ge två färger samma position, så att färgen byts direkt i stället för att blandas.
- Diagonala ränder gjorda med repeating-linear-gradient möts utan skarv i vilken vinkel som helst, till skillnad från en kakelsatt linjär gradient med background-size.
- repeating-radial-gradient() ger ringar och krusningar, och repeating-conic-gradient() ger strålar och solstrålar.
- Hårda färgkanter kan se hackiga ut på skärmen, och en övergång på en halv till en pixel mjukar upp dem.

En **repeating linear gradient** i CSS upprepar en kort följd av färgstopp längs en linje tills den fyller elementet. Skriv `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` så får du diagonala rosa ränder, var och en 14 pixlar bred, utan bildfil. Längden på en upprepning bestäms av det sista stoppet, här 28px. Använd samma idé med `repeating-radial-gradient()` för ringar och `repeating-conic-gradient()` för strålar.

## Så fungerar repeating-linear-gradient()

Syntaxen är identisk med en vanlig [linjär gradient](https://gradiently.design/sv/guide/css-linear-gradient). Skillnaden är vad som händer efter det sista stoppet: i stället för att hålla den sista färgen börjar webbläsaren om mönstret. Två regler gör det mesta av jobbet.

- **Det sista stoppets position är kakellängden.** Stopp vid `0`, `14px` och `28px` upprepas var 28:e pixel.
- **Två färger på samma position ger en hård kant.** `#f472b6 0 14px, #fdf2f8 14px 28px` hoppar från rosa till blekrosa vid 14px utan blandning.
- **Varje stopp kan ta två positioner.** `#f472b6 0 14px` betyder helt rosa från 0 till 14px, vilket är kortare än att skriva färgen två gånger.
- **Använd längder, inte procent, för ränder.** Procent är relativa till gradientlinjen, så ränderna sträcks när elementet ändrar storlek.

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

Avsluta den mjuka upprepningen med färgen du började med, annars ser du en hård skarv var 40:e pixel.

## Randmönster att kopiera

- Polkarand: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)`
- Blågrön markis: `repeating-linear-gradient(90deg, #0f766e 0 40px, #f0fdfa 40px 80px)`
- Marinblå nålrand: `repeating-linear-gradient(90deg, #334155 0 1px, #0f172a 1px 12px)`
- Varningstejp: `repeating-linear-gradient(135deg, #fde68a 0 10px, #1c1917 10px 20px)`
- Linjerat papper: `repeating-linear-gradient(0deg, #fdf6ec 0 22px, #bfdbfe 22px 23px)`
- Violett i tre toner: `repeating-linear-gradient(90deg, #7c3aed 0 8px, #a78bfa 8px 16px, #ede9fe 16px 24px)`

Sex randmönster. Ändra vinkeln för att vrida vilket som helst av dem, och ändra längderna för att skala dem; mönstret möts alltid rent.

Linjerat papper är ett bra exempel på en asymmetrisk upprepning: 22 pixlar papper, en pixel linje. Samma mönster med en röd marginallinje ovanpå ger ett övertygande anteckningsblock. Fler mönsteridéer, inklusive rutnät och prickar, finns i [CSS-mönster](https://gradiently.design/sv/guide/css-patterns).

## Upprepande gradienter eller background-size

Du kan också göra ränder med en vanlig `linear-gradient()` och `background-size`, som kakelsätter en liten bild av gradienten. Båda fungerar. De beter sig olika i vinklar.

### linear-gradient + background-size

- Kakelsätter en rektangel, så 45-gradiga ränder kräver noggrann matematik för att passa ihop
- Pixelexakt för horisontella och vertikala ränder
- Lätt att kombinera med andra kakel i ett rutnät
- Animera genom att flytta `background-position` ett kakel

### repeating-linear-gradient

- Upprepas längs gradientlinjen, möts rent i vilken vinkel som helst
- Randbredden anges direkt i pixlar
- En deklaration, ingen storlek att hålla synkad
- Animera genom att flytta `background-position` längs linjen

För allt diagonalt, ta den upprepande versionen först. För schackrutor och rutnät, där du behöver två riktningar samtidigt, är `background-size` med lagrade gradienter enklare.

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

Två mönster som behöver `background-size`. Schackrutan är den klassiska transparensbakgrunden; rutnätet passar tekniska sidor och instrumentpaneler.

Schackrutans andra färg startar på position `0`. Ett stopp kan aldrig ligga före det föregående, så webbläsaren flyttar upp det till där den sista färgen slutade, vilket ger en hård kant utan att upprepa talet. Det är en praktisk genväg i vilken gradient som helst, upprepande eller inte.

## Ringar med repeating-radial-gradient()

Den radiella versionen upprepas utåt från en mittpunkt, så ränder blir ringar. Flytta mitten med `at` för att göra krusningar som sprider sig från ett hörn. Som med [radiella gradienter](https://gradiently.design/sv/guide/css-radial-gradient) håller `circle` ringarna runda; standardellipsen sträcker dem mot rutan.

- Indigomålskiva: `repeating-radial-gradient(circle at 50% 50%, #312e81 0 10px, #4338ca 10px 20px)`
- Mjuka krusningar från ett hörn: `repeating-radial-gradient(circle at 0% 100%, #fdf6ec 0, #f5d0a9 12px, #fdf6ec 24px)`
- Bärnstensfärgad solstråle: `repeating-conic-gradient(from 0deg, #f59e0b 0deg 10deg, #fde68a 10deg 20deg)`
- Låga strålar från golvet: `repeating-conic-gradient(from 0deg at 50% 100%, #0f172a 0deg 6deg, #1e293b 6deg 12deg)`

Två radiella och två koniska upprepningar. Koniska stopp är vinklar: solstrålen upprepas var 20:e grad, så den har 18 strålar av varje färg.

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

Koniska gradienter sveper runt en punkt, så deras stopp är vinklar. Välj en upprepning som delar 360 jämnt, som 20, 30 eller 45 grader, annars blir den sista strålen en annan bredd än de andra. Håll de två färgerna nära varandra i ljushet för en bakgrund; strålar med hög kontrast vibrerar på skärmen och drar uppmärksamhet från allt annat. Hela syntaxen finns i [koniska CSS-gradienter](https://gradiently.design/sv/guide/css-conic-gradient).

## Så fixar du hackiga randkanter

Hårda kanter i vinkel kan se trappstegsformade ut, och vid vissa zoomnivåer renderar webbläsare dem ojämnt, så några ränder ser tjockare ut än andra. Lösningen är att ge varje kant en liten övergång i stället för ett 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
  );
}
```

Blandningen är för liten för att ses som en gradient, men den låter webbläsaren kantutjämna kanten.

> **Tunna linjer och skärmar med hög täthet** En linje på en pixel kan renderas som två halvstarka pixlar på vissa skärmar. Om en nålrand ser suddig ut, prova ett helt antal enhetspixlar eller en något bredare linje i en mjukare färg.

## En animerad frisörstolpe som förloppsstapel

Att flytta `background-position` exakt en upprepning får ränderna att färdas utan hopp. För ett 45-gradigt mönster med en upprepning på 28px är avståndet längs horisontalaxeln upprepningen delad med sinus för vinkeln, ungefär 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; }
}
```

Bilden är en upprepning bredare än stapeln och glider åt vänster exakt en upprepning, så slingan har inget hopp. Violetta toner med låg kontrast läses som aktivitet snarare än larm, och eftersom `background-position` målar om, håll det till små element.

För större animerade bakgrunder, se [animerade CSS-gradienter](https://gradiently.design/sv/guide/css-animated-gradient), som går igenom billigare tekniker. Ränder och ringar är fina för detaljer, biljetter och laddningslägen. För en bakgrund folk känner igen som din tillför Gradiently-Marks material, ljus och korn som ett upprepande mönster inte kan, och de renderas i varje storlek du designar i.

## FAQ

### Vad är skillnaden mellan linear-gradient och repeating-linear-gradient?

En linjär gradient håller sin sista färg efter det slutliga stoppet. En repeating linear gradient börjar om stoppen, så ett kort mönster fyller hela elementet.

### Hur gör jag ränder i CSS?

Använd hårda stopp i en upprepande gradient: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` ger diagonala ränder på 14 pixlar.

### Hur anger jag storleken på en upprepande gradient?

Positionen för det sista färgstoppet bestämmer längden på en upprepning. Använd längder i pixlar så att ränderna behåller samma bredd i varje elementstorlek.

### Varför ser mina CSS-ränder hackiga ut?

Perfekt hårda kanter i vinkel kan ge kantflimmer. Lämna ett mellanrum på ungefär en pixel mellan varje stopppar så att webbläsaren kan mjuka upp kanten.

### Kan jag göra ringar eller strålar med upprepande gradienter?

Ja. `repeating-radial-gradient()` ger ringar och `repeating-conic-gradient()` ger strålar; koniska stopp är vinklar i stället för längder.