# CSS-kartiomainen liukuväri: ympyrät, piirakkakaaviot ja kiilto

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

conic-gradient() pyyhkäisee värin pisteen ympäri kuin kellon viisari. Tuo yksi ajatus piirtää väriympyrät, piirakkakaaviot, donitsikaaviot, metallinkiillon ja tähtipurskeet.

## The short version

- CSS:n kartiomainen liukuväri asettaa värit keskipisteen ympärille pyyhkäisten myötäpäivään ylhäältä sen sijaan, että ne kulkisivat viivaa pitkin tai renkaina ulospäin.
- Kartiomaisen liukuvärin pysäytyspisteet käyttävät kulmia tai prosentteja täydestä kierroksesta, joten 25 % ja 90deg tarkoittavat samaa paikkaa.
- Kovat pysäytykset muuttavat kartiomaisen liukuvärin paloiksi, mikä on nopein tapa piirtää piirakkakaavio CSS:llä.
- Avainsana from kääntää kohtaa, jossa pyyhkäisy alkaa, ja at siirtää keskipistettä.
- repeating-conic-gradient() toistaa pysäytyksensä ympyrän ympäri ja piirtää yhdessä background-sizen kanssa shakkilautoja ja tähtipurskeita.

**CSS:n kartiomainen liukuväri** pyyhkäisee värin keskipisteen ympäri, kuten kellon viisari kiertää taulunsa. Missä lineaarinen liukuväri muuttuu viivaa pitkin ja säteittäinen ulospäin keskeltä, `conic-gradient()` muuttuu kulman mukaan. Se alkaa ylhäältä, kulkee myötäpäivään ja sitä voi käyttää kaikkialla, missä CSS ottaa kuvan. Se tekee siitä luonnollisen työkalun väriympyröille, piirakkakaavioille, latausrenkaille ja harjatun metallin kulmakorostuksille.

Yksinkertainen väriympyrä: `conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`

Seitsemän pysäytystä tasaisesti täyden kierroksen ympärille. Ensimmäisen värin toisto lopussa sulkee sauman ylhäällä.

Jos valitset suunnitteluun liukuvärityyppiä syntaksin opettelun sijaan, [liukuvärityypit](https://gradiently.design/fi/guide/types-of-gradients) ja suunnitteluopas [kartiomaisista liukuväreistä](https://gradiently.design/fi/guide/conic-gradient) ovat parempia lähtökohtia.

## conic-gradient()-syntaksi

```css
/*               start angle   centre        stops */
conic-gradient(from 90deg at 30% 50%, #0ea5e9, #6366f1, #0ea5e9)

/* stops as angles or as percentages of the turn */
conic-gradient(#f59e0b 0deg 90deg, #1e293b 90deg)
conic-gradient(#f59e0b 0% 25%, #1e293b 25%)
```

Kaikki ennen ensimmäistä pilkkua on valinnaista. Kaksi viimeistä pysäytyslistaa piirtävät saman neljänneksen palan.

| Osa | Esimerkki | Oletus |
| --- | --- | --- |
| Aloituskulma | `from 45deg` | `from 0deg`, suoraan ylös |
| Keskipiste | `at 30% 50%`, `at top left` | `at center` |
| Interpolointi | `in oklch`, `in hsl longer hue` | sRGB heksaväreille |
| Pysäytyksen paikka | `90deg`, `0.25turn`, `25%` | jaettu tasaisesti kierroksen ympärille |

conic-gradient()-funktion osat. Pysäytysten paikat mitataan ympyrän ympäri, ei viivaa pitkin.

Kulmat kulkevat myötäpäivään ylhäältä: `90deg` on kolme, `180deg` kuusi kellossa. Täydellinen määritelmä on [MDN:n conic-gradient()-sivulla](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient). Selaintuki on ollut yleinen nykyisessä Chromessa, Edgessä, Safarissa ja Firefoxissa jo vuosia, joten etuliitteitä ei tarvita.

## Pyyhkäisyn kääntäminen ja siirtäminen

`from` kääntää koko liukuväriä, mikä on kätevää, kun ensimmäisen ja viimeisen värin välinen sauma muuten olisi ylhäällä. `at` siirtää keskipistettä. Sen siirtäminen kulmaan muuttaa ympyrän säteiden viuhkaksi, ja sen siirtäminen kokonaan laatikon ulkopuolelle antaa lempeän kulmikkaan pesun, joka ei muistuta ympyrää lainkaan.

- from 0deg, keskellä: `conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- from 180deg: sauma alhaalla: `conic-gradient(from 180deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- at 0% 100%: viuhka kulmasta: `conic-gradient(at 0% 100%, #1e1b4b, #7c3aed 30deg, #f472b6 60deg, #fde68a 90deg)`

Sama indigon, violetin ja pinkin perhe, käännettynä ja siirrettynä. Kulmaversiossa neljänneskierros täyttää laatikon.

## Piirakka- ja donitsikaaviot CSS:llä

Anna jokaiselle palalle alku ja loppu ja anna jokaisen alkaa siitä, mihin edellinen päättyi. Toisen pysäytyspaikan kirjoittaminen nollana on oikotie: edellistä pienempi paikka rajataan siihen, joten uusi väri alkaa täsmälleen siitä, mihin viimeinen päättyi. Pyöristä elementti ominaisuudella `border-radius: 50%` ja leikkaa reikä säteittäisellä maskilla muuttaaksesi piirakan donitsiksi.

```css
.pie {
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #6366f1 0 40%,   /* 40% */
    #22d3ee 0 65%,   /* 25% */
    #f59e0b 0 85%,   /* 20% */
    #e2e8f0 0        /* the rest, 15% */
  );
}

.donut {
  /* same background as .pie, then a hole */
  mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
}
```

Nelipalainen piirakka ja yksi rivi, joka muuttaa sen donitsiksi. Käytä prosenteille mukautettuja ominaisuuksia, jos data muuttuu.

Piirakan palat: 40, 25, 20 ja 15 %: `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #f59e0b 0 85%, #e2e8f0 0)`

Piirakan tausta yksinään. Pyöreällä elementillä se näyttää kaaviolta.

> **Kaaviot tarvitsevat myös oikean tekstin** Liukuväri on kuva, joten ruudunlukijat eivät voi lukea sen arvoja. Laita luvut tekstinä tai taulukkona kaavion viereen tai anna elementille `role="img"` ja `aria-label`, joka kertoo ne.

Kovat reunat kartiomaisissa liukuväreissä voivat näyttää hieman rosoisilta palojen viivoilla joissakin selaimissa. Jos se häiritsee, jätä pysäytysten väliin murto-osa asteesta, kuten `#6366f1 0 39.8%, #22d3ee 40.2% 65%`, jolloin reuna saa hiuksenhienon häivytyksen.

## Väriympyrät sävyinterpoloinnilla

Väriympyrä tarvitsee yleensä kuusi tai seitsemän pysäytystä. Interpolointimenetelmillä voit pyytää selainta kulkemaan sävyympyrän itse. `longer hue` kulkee pitkän reitin kahden sävyn välillä, ja kun molemmat pysäytykset ovat sama väri, pitkä reitti on koko ympyrä, joten kaksi punaista tekee täyden spektrin.

```css
.wheel {
  border-radius: 50%;
  background: conic-gradient(in hsl longer hue, #ff0000, #ff0000);
}
```

Yksi väri kahdesti ja täysi sateenkaari välissä. [OKLCH-liukuvärit](https://gradiently.design/fi/guide/css-gradient-oklch) selittävät lyhyemmän ja pidemmän sävyn.

## Metallinkiilto ja korostukset

Oikea harjattu metalli ja kiillotetut levyt sieppaavat valoa kulmikkaina kaistoina, mikä on täsmälleen se, mitä kartiomainen liukuväri piirtää. Vuorottele muutamaa vaaleaa ja tummaa harmaata, epätasaisin välein, ja pinta luetaan metalliksi. Kerrostettuna matalalla peittävyydellä värin päälle sama temppu lisää kiiltoa painikkeisiin ja kortteihin. Katso työstetty esimerkki oppaasta [liukuväripainikkeet](https://gradiently.design/fi/guide/css-gradient-button).

- Harjattu teräs: `conic-gradient(from 20deg, #9ca3af, #f9fafb 12%, #6b7280 30%, #e5e7eb 48%, #4b5563 62%, #f3f4f6 80%, #9ca3af)`
- Kultalevy: `conic-gradient(from 200deg, #92400e, #fde68a 15%, #b45309 35%, #fef3c7 55%, #78350f 75%, #92400e)`

Epätasaiset vaaleat ja tummat kaistat pyyhkäistynä keskipisteen ympäri luetaan kiillotettuna metallina.

## Toistuvat kartiomaiset liukuvärit kuvioihin

`repeating-conic-gradient()` toistaa pysäytyslistansa kierroksen ympäri. Lyhyet, kovareunaiset pysäytykset antavat tähtipurskeita. Yhdessä `background-size`n kanssa kaksivärinen neljännesmalli laatoittuu shakkilaudaksi, kuvioksi, jota on muuten hankala piirtää liukuväreillä. Lisää oppaassa [CSS-kuviot](https://gradiently.design/fi/guide/css-patterns).

- Aurinkopurske: `repeating-conic-gradient(#fbbf24 0 10deg, #f97316 10deg 20deg)`
- Yön säteet: `repeating-conic-gradient(from 45deg at 50% 50%, #0f172a 0 15deg, #1e293b 15deg 30deg)`

Lyhyet kovat pysäytykset toistettuna koko ympäri.

```css
.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 32px 32px;
}
```

16 pikselin shakkilauta: klassinen läpinäkyvyysruudukko kuvankäsittelyohjelmien takana.

## FAQ

### Mikä on kartiomainen liukuväri CSS:ssä?

Se on liukuväri, jonka värit muuttuvat kulman mukaan keskipisteen ympäri alkaen ylhäältä ja edeten myötäpäivään, kirjoitettuna `conic-gradient()`.

### Miten teen piirakkakaavion CSS:llä?

Käytä kovia pysäytyksiä kartiomaisessa liukuvärissä, kuten `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #e2e8f0 0)`, elementillä, jolla on `border-radius: 50%`. Laita arvot myös tekstiin ruudunlukijoille.

### Miten käännän kartiomaista liukuväriä?

Lisää `from` ja kulma ensimmäiseksi argumentiksi, esimerkiksi `conic-gradient(from 90deg, ...)`. Pyyhkäisy alkaa silloin kolmesta eikä ylhäältä.

### Miksi kartiomaisen liukuvärini reunat ovat rosoiset?

Koville pysäytyksille ei ole häivytystä, ja jotkin selaimet piirtävät rajan pehmentämättä. Murto-osan asteesta jättäminen vierekkäisten pysäytysten väliin pehmentää sitä.

### Toimivatko kartiomaiset liukuvärit kaikissa selaimissa?

Kyllä, Chromen, Edgen, Safarin ja Firefoxin nykyiset versiot tukevat `conic-gradient()`- ja `repeating-conic-gradient()`-funktioita ilman etuliitteitä.