# Toistuva lineaarinen CSS-liukuväri: raidat ja kuviot

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

repeating-linear-gradient() toistaa lyhyttä värijaksoa loputtomasti viivaa pitkin. Näin syntyvät raidat, markiisit ja etenemispalkit sekä säteittäisillä ja kartiomaisilla versioilla renkaat ja säteet, ilman kuvaa.

## The short version

- Toistuva lineaarinen liukuväri toistaa väripisteensä liukuväriviivaa pitkin. Yhden toiston pituus on viimeisen väripisteen paikka.
- Terävät raidat syntyvät asettamalla kaksi väriä samaan kohtaan, jolloin väri vaihtuu heti sekoittumisen sijaan.
- repeating-linear-gradient liittää vinoraidat saumattomasti kaikissa kulmissa, toisin kuin background-size-asetuksella toistettu lineaarinen liukuväri.
- repeating-radial-gradient() luo renkaita ja väreitä, repeating-conic-gradient() säteitä ja sädeviuhkoja.
- Terävät värireunat voivat näyttää näytöllä sahalaitaisilta. Puolen tai yhden pikselin siirtymä pehmentää niitä.

**Toistuva lineaarinen liukuväri** toistaa CSS:ssä lyhyttä väripisteiden jaksoa viivaa pitkin, kunnes elementti täyttyy. `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` luo vinot pinkit raidat, kukin 14 pikseliä leveänä, ilman kuvatiedostoa. Viimeinen piste määrää toiston pituuden, tässä 28px. Sama idea tuottaa renkaita `repeating-radial-gradient()`-funktiolla ja säteitä `repeating-conic-gradient()`-funktiolla.

## Miten repeating-linear-gradient() toimii

Syntaksi on sama kuin tavallisessa [lineaarisessa liukuvärissä](https://gradiently.design/fi/guide/css-linear-gradient). Ero on viimeisen pisteen jälkeen: viimeisen värin jatkamisen sijaan selain aloittaa kuvion alusta. Kaksi sääntöä tekee suurimman osan työstä.

- **Viimeisen pisteen paikka on toiston pituus.** Pisteet `0`, `14px` ja `28px` toistuvat 28 pikselin välein.
- **Kaksi väriä samassa kohdassa luo terävän reunan.** `#f472b6 0 14px, #fdf2f8 14px 28px` vaihtuu pinkistä vaaleanpinkiksi kohdassa 14px sekoittumatta.
- **Jokaisella pisteellä voi olla kaksi paikkaa.** `#f472b6 0 14px` tarkoittaa tasaista pinkkiä välillä 0 ja 14px. Se on lyhyempi kuin värin kirjoittaminen kahdesti.
- **Käytä raidoille pituuksia, älä prosentteja.** Prosentit suhteutuvat liukuväriviivaan, joten raidat venyvät elementin koon muuttuessa.

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

Päätä pehmeä toisto samaan väriin kuin alussa. Muuten näet terävän sauman 40 pikselin välein.

## Kopioitavat raitakuviot

- Karkkiraidat: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)`
- Petroolimarkiisi: `repeating-linear-gradient(90deg, #0f766e 0 40px, #f0fdfa 40px 80px)`
- Laivastonsininen hiusraita: `repeating-linear-gradient(90deg, #334155 0 1px, #0f172a 1px 12px)`
- Varoitusnauha: `repeating-linear-gradient(135deg, #fde68a 0 10px, #1c1917 10px 20px)`
- Viivoitettu paperi: `repeating-linear-gradient(0deg, #fdf6ec 0 22px, #bfdbfe 22px 23px)`
- Kolmisävyinen violetti: `repeating-linear-gradient(90deg, #7c3aed 0 8px, #a78bfa 8px 16px, #ede9fe 16px 24px)`

Kuusi raitakuviota. Muuta kulmaa kääntääksesi niitä ja pituuksia muuttaaksesi mittakaavaa. Kuvio liittyy aina siististi.

Viivoitettu paperi on hyvä esimerkki epäsymmetrisestä toistosta: 22 pikseliä paperia ja yksi pikseli viivaa. Punainen marginaaliviiva saman kuvion päällä luo uskottavan muistikirjan. Lisää kuvioita, kuten ruudukoita ja pisteitä, löydät [CSS-kuvioista](https://gradiently.design/fi/guide/css-patterns).

## Toistuvat liukuvärit vai background-size

Voit tehdä raidat myös tavallisella `linear-gradient()`-funktiolla ja `background-size`-asetuksella, joka toistaa pientä liukuvärikuvaa. Molemmat toimivat, mutta kulmissa niiden käytös eroaa.

### linear-gradient + background-size

- Toistaa suorakulmiota, joten 45 asteen raidat vaativat tarkkaa laskentaa
- Pikselintarkka vaaka- ja pystyraidoissa
- Helppo yhdistää muihin toistuviin kuviin ruudukossa
- Animoi siirtämällä `background-position`-arvoa yhden toiston verran

### repeating-linear-gradient

- Toistuu liukuväriviivaa pitkin ja liittyy siististi joka kulmassa
- Raidan leveys asetetaan suoraan pikseleinä
- Yksi määrittely, ei synkronoitavaa kokoa
- Animoi siirtämällä `background-position`-arvoa viivaa pitkin

Vinokuvioihin kannattaa kokeilla ensin toistuvaa versiota. Shakkiruutuihin ja ruudukoihin tarvitaan kaksi suuntaa yhtä aikaa, joten `background-size` ja kerrokselliset liukuvärit ovat yksinkertaisempi ratkaisu.

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

Kaksi `background-size`-asetusta tarvitsevaa kuviota. Shakkiruutu on tuttu läpinäkyvyyden tausta. Ruudukko sopii teknisille sivuille ja hallintapaneeleihin.

Shakkiruudun toinen väri alkaa paikasta `0`. Piste ei voi sijaita edeltäjäänsä ennen, joten selain siirtää sen viimeisen värin loppukohtaan. Näin syntyy terävä reuna ilman luvun toistamista. Lyhennys toimii kaikissa liukuväreissä, toistuvissa ja tavallisissa.

## Renkaat repeating-radial-gradient()-funktiolla

Säteittäinen versio toistuu keskuksesta ulospäin, joten raidoista tulee renkaita. Siirrä keskusta `at`-arvolla, niin väreet leviävät kulmasta. Kuten [säteittäisissä liukuväreissä](https://gradiently.design/fi/guide/css-radial-gradient), `circle` pitää renkaat pyöreinä. Oletusellipsi venyttää ne laatikon muotoon.

- Indigomaali: `repeating-radial-gradient(circle at 50% 50%, #312e81 0 10px, #4338ca 10px 20px)`
- Pehmeät väreet kulmasta: `repeating-radial-gradient(circle at 0% 100%, #fdf6ec 0, #f5d0a9 12px, #fdf6ec 24px)`
- Meripihkanväriset säteet: `repeating-conic-gradient(from 0deg, #f59e0b 0deg 10deg, #fde68a 10deg 20deg)`
- Matalat säteet lattiasta: `repeating-conic-gradient(from 0deg at 50% 100%, #0f172a 0deg 6deg, #1e293b 6deg 12deg)`

Kaksi säteittäistä ja kaksi kartiomaista toistoa. Kartioliukuvärin pisteet ovat kulmia. Sädeviuhka toistuu 20 asteen välein, joten kummankin värisiä säteitä on 18.

## Säteet repeating-conic-gradient()-funktiolla

Kartioliukuvärit kiertävät pisteen ympäri, joten niiden väripisteet ilmaistaan kulmina. Valitse toisto, jolla 360 jakautuu tasan, kuten 20, 30 tai 45 astetta. Muuten viimeinen säde on muita eri levyinen. Pidä taustan kahden värin valoisuus lähellä toisiaan. Vahvakontrastiset säteet värisevät näytöllä ja vievät huomion muulta. Täysi syntaksi löytyy [CSS-kartioliukuväreistä](https://gradiently.design/fi/guide/css-conic-gradient).

## Sahalaitaisten raitareunojen korjaaminen

Vinot terävät reunat voivat näyttää portaittaisilta, ja joillakin zoomaustasoilla selain piirtää ne epätasaisesti. Silloin muutama raita näyttää muita paksummalta. Anna jokaiselle reunalle pieni siirtymä täydellisen hypyn sijaan.

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

Sekoitus on liian pieni erottuakseen liukuvärinä, mutta se antaa selaimen tasoittaa reunan.

> **Ohuet viivat ja tiheät näytöt** Yhden pikselin viiva voi piirtyä joillakin näytöillä kahtena puolivahvana pikselinä. Jos hiusraita näyttää sumealta, kokeile kokonaislukumäärää laitteen pikseleitä tai hieman leveämpää viivaa pehmeämmällä värillä.

## Animoitu vinoraitainen etenemispalkki

`background-position`-arvon siirtäminen täsmälleen yhden toiston verran liikuttaa raitoja ilman hyppyä. Kun kuvion kulma on 45 astetta ja toisto 28px, vaakasuuntainen matka on toiston pituus jaettuna kulman sinillä, noin 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; }
}
```

Kuva on yhden toiston verran palkkia leveämpi ja liukuu vasemmalle täsmälleen sen verran, joten silmukka ei hypähdä. Matalan kontrastin violetit viestivät toiminnasta hälytyksen sijaan. Koska `background-position` vaatii uudelleenmaalausta, käytä sitä pienissä elementeissä.

Suurempiin animoituihin taustoihin katso [animoidut CSS-liukuvärit](https://gradiently.design/fi/guide/css-animated-gradient), jossa esitellään kevyempiä tapoja. Raidat ja renkaat sopivat yksityiskohtiin, lippuihin ja lataustiloihin. Kun haluat omaksi tunnistettavan taustan, Gradientlyn Markit tuovat materiaalia, valoa ja rakeisuutta, joita toistuva kuvio ei tarjoa. Ne piirtyvät jokaiseen käyttämääsi suunnittelukokoon.

## FAQ

### Mitä eroa on linear-gradient- ja repeating-linear-gradient-funktioilla?

Lineaarinen liukuväri jatkaa viimeistä väriä viimeisen pisteen jälkeen. Toistuva lineaarinen liukuväri aloittaa pisteet alusta, joten lyhyt kuvio täyttää koko elementin.

### Miten teen CSS:llä raitoja?

Käytä toistuvassa liukuvärissä teräviä pisteitä: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` luo 14 pikselin vinoraidat.

### Miten asetan toistuvan liukuvärin koon?

Viimeisen väripisteen paikka määrää yhden toiston pituuden. Käytä pikselipituuksia, jotta raitojen leveys pysyy samana kaikissa elementtiko’oissa.

### Miksi CSS-raitani näyttävät sahalaitaisilta?

Täysin terävät vinoreunat voivat porrastua. Jätä kunkin pisteparin väliin noin yhden pikselin rako, jotta selain voi tasoittaa reunan.

### Voinko tehdä toistuvilla liukuväreillä renkaita tai säteitä?

Kyllä. `repeating-radial-gradient()` luo renkaita ja `repeating-conic-gradient()` säteitä. Kartioliukuvärin pisteet ovat kulmia pituuksien sijaan.