# CSS radial-gradient: muodot, koot ja paikat

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

radial-gradient() piirtää värin ulospäin pisteestä. Tässä jokainen sen osa elävin esimerkein sekä kerrostamistemput pehmeiden hehkujen, valokeilojen ja vinjettien takana.

## The short version

- CSS:n säteittäinen liukuväri levittää värin ulospäin keskipisteestä, ja se kirjoitetaan radial-gradient()-funktiolla missä tahansa, mihin CSS hyväksyy kuvan.
- Oletuksena säteittäinen liukuväri on ellipsi, joka on keskitetty laatikkoon ja mitoitettu yltämään kauimmaiseen kulmaan.
- Kokoavainsanat closest-side, closest-corner, farthest-side ja farthest-corner määräävät, mihin viimeinen värikohta osuu.
- Avainsana at siirtää keskipistettä, esimerkiksi at 20% 30%, ja paikat toimivat kuten background-position.
- Useiden läpinäkyväksi häipyvien säteittäisten liukuvärien kerrostaminen on vakiotapa rakentaa pehmeitä hehkuja ja mesh-tyyppisiä taustoja CSS:llä.

**CSS:n säteittäinen liukuväri** (radial gradient) sekoittaa väriä ulospäin pisteestä, kuin lampusta leviävää valoa. Se kirjoitetaan `radial-gradient()`-funktiolla ja sitä käytetään kaikkialla, missä CSS ottaa kuvan, yleensä `background-image`ssa. Ilman asetuksia se piirtää laatikon keskelle ellipsin, joka yltää kauimmaiseen kulmaan: `radial-gradient(#fef3c7, #b45309)` antaa vaalean keskustan, joka hehkuu ulos syvään meripihkaan.

Meripihkahehku, kaikki oletuksina: `radial-gradient(#fef3c7, #f59e0b 45%, #78350f)`

Ellipsi, keskitetty, mitoitettu kauimmaiseen kulmaan. Sen saat, kun annat vain värit.

Kaikki muu funktiossa muuttaa yhtä kolmesta asiasta: **muotoa**, **kokoa** ja **paikkaa**. Kun hallitset ne, sama funktio piirtää hehkuja, valokeiloja, vinjettejä, aurinkosäteitä ja värilammikot [mesh-liukuvärin CSS:llä](https://gradiently.design/fi/guide/css-mesh-gradient) takana. Säteittäisten sekoitusten muotoilupuolesta kerrotaan oppaassa [säteittäiset liukuvärit](https://gradiently.design/fi/guide/radial-gradient).

## radial-gradient()-funktion syntaksi

```css
/* shape  size          position        stops */
radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 60%, #1c1917)

/* everything before the first comma is optional */
radial-gradient(#fde047, #ea580c)
```

Muoto ja koko voivat tulla kummassa järjestyksessä tahansa. Paikka seuraa aina sanaa at.

| Osa | Arvot | Oletus |
| --- | --- | --- |
| Muoto | `circle` tai `ellipse` | `ellipse` |
| Koko | avainsana, yksi pituus ympyrälle tai kaksi pituutta tai prosenttia ellipsille | `farthest-corner` |
| Paikka | `at` ja mikä tahansa, minkä `background-position` hyväksyy | `at center` |
| Interpolaatio | `in oklab`, `in oklch` ja muut väriavaruudet | sRGB heksaväreille |
| Värikohdat | kaksi tai useampi väri valinnaisin paikoin | pakollinen |

radial-gradient()-funktion osat. Vain värikohdat ovat pakollisia.

Yksi sääntö yllättää ihmiset: ympyrän koon täytyy olla pituus, kuten `200px`, ei koskaan prosentti, koska suorakulmion prosentilla ei ole yhtä sädettä. Ellipsit hyväksyvät prosentit, kuten `ellipse 60% 40%`. [MDN:n radial-gradient()-viite](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient) luettelee koko kieliopin.

## Ympyrä vastaan ellipsi

Ellipsi venyy laatikon mukana, joten leveällä bannerilla hehku on leveä ja korkealla tarinalla korkea. Ympyrä pysyy pyöreänä, mitä laatikko tekeekin. Käytä ellipsejä taustoihin, joiden pitää täyttää säiliönsä tasaisesti, ja ympyröitä kaikkeen, minkä pitää näyttää valonlähteeltä, planeetalta tai painikkeen hehkulta.

- Ellipsi: seuraa laatikkoa: `radial-gradient(ellipse, #a7f3d0, #059669 50%, #022c22)`
- Ympyrä: pysyy pyöreänä: `radial-gradient(circle, #a7f3d0, #059669 50%, #022c22)`

Samat minttu-metsä-värikohdat. Leveällä laatalla ellipsi leviää sivuille, ympyrä ei.

## Kokoavainsanat: closest-side ja farthest-corner

Koko määrää, mihin viimeinen värikohta osuu, eli missä liukuvärin päättyvä muoto sijaitsee. Neljä avainsanaa mittaavat keskipisteestä laatikon lähimpään tai kauimmaiseen sivuun tai kulmaan. Ne näyttävät erilaisilta vain, kun keskipiste on sivussa, joten alla olevat esimerkit alkavat kaikki kohdasta `30% 40%`.

- closest-side: `radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- closest-corner: `radial-gradient(circle closest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-side: `radial-gradient(circle farthest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)`
- farthest-corner: `radial-gradient(circle farthest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)`

Yksi aurinko, neljä kokoa. closest-side päättyy lähimpään reunaan, farthest-corner, oletus, yltää kauimmaiseen kulmaan.

Käytännössä `closest-side` sopii rajattuihin muotoihin, kuten pisteisiin ja merkkeihin, koska väri ei koskaan valu lähimmän reunan yli. `farthest-corner` sopii taustoihin, koska sekoitus peittää koko laatikon. Kun tarvitset tarkan hallinnan, anna pituus: `circle 180px at 50% 0` on 180 pikselin hehku, joka riippuu yläreunasta.

## Paikan asettaminen at-sanalla

Avainsana `at` asettaa keskipisteen samoilla arvoilla kuin `background-position`: avainsanoilla kuten `at top right`, prosenteilla kuten `at 20% 80%` tai pituuksilla kuten `at 40px 60px`. Keskipiste voi olla jopa laatikon ulkopuolella, kuten `at 50% 120%`, joka antaa alareunan alta nousevan horisonttihehkun.

- at top left: `radial-gradient(circle at top left, #c4b5fd, #6d28d9 45%, #1e1b4b)`
- at 50% 120%: horisontti: `radial-gradient(ellipse at 50% 120%, #fb7185, #9f1239 45%, #0f0a1e 75%)`
- at 80% 20%: `radial-gradient(circle at 80% 20%, #7dd3fc, #0369a1 35%, #082f49)`

Keskipisteen siirtäminen muuttaa tunnelmaa enemmän kuin värien vaihtaminen.

## Kerrostetut säteittäiset hehkut

Hyödyllisin säteittäinen malli on useita liukuvärejä pinottuna yhteen `background-image`en, kukin häipyen väriin `transparent`, tasaisen tumman värin päällä. Jokainen kerros on valolammikko omassa paikassaan. Koska ensimmäinen kerros piirretään päälle, laita kirkkain ja pienin hehku ensin.

```css
.glow {
  background-color: #0b0a1a;
  background-image:
    radial-gradient(circle at 20% 25%, rgb(124 58 237 / 0.55), transparent 45%),
    radial-gradient(circle at 80% 30%, rgb(236 72 153 / 0.45), transparent 40%),
    radial-gradient(ellipse at 50% 110%, rgb(56 189 248 / 0.4), transparent 60%);
}
```

Kolme violetin, pinkin ja taivaansinisen lammikkoa lähes mustalla pohjalla. Muuta yhtä paikkaa, ja koko sommitelma siirtyy.

Kaksi muuta mallia kattaa useimmat jäljellä olevat työt. **Vinjetti** tummentaa reunat: `radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55))` kerrostettuna valokuvan päälle. **Valokeila** seuraa osoitinta, kun sen paikka syötetään mukautetuista ominaisuuksista, kuten `radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent)`, ja muutama rivi JavaScriptiä asettaa `--x`:n ja `--y`:n `pointermove`-tapahtumassa.

> **Pehmeät hehkut juovittuvat helposti** Suuret, vähäkontrastiset säteittäiset häivytykset tummilla pohjilla ovat paikkoja, joissa portaat näkyvät ensin. Himmeä kohinakerros päällä piilottaa sen; katso [CSS-kohinatekstuuri](https://gradiently.design/fi/guide/css-noise-texture) ja [liukuvärin banding](https://gradiently.design/fi/guide/gradient-banding).

## Toistuvat säteittäiset liukuvärit

`repeating-radial-gradient()` toistaa värikohtansa ulospäin, kunnes laatikko on täynnä, joten kovien värikohtien pari muuttuu renkaiksi. Käytä värikohtien paikoille pituuksia, jotta renkaan leveys pysyy vakiona. Se on aaltoilun, maalitaulun ja puolisävymäisten tekstuurien perusta, ja lisää löytyy oppaasta [CSS-kuviot](https://gradiently.design/fi/guide/css-patterns).

- Laivastonsiniset renkaat: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 10px, #1e3a8a 10px 20px)`
- Kulma-aallot: `repeating-radial-gradient(circle at 0 100%, #fef3c7 0 6px, #f59e0b 6px 9px, #fef3c7 9px 18px)`

Kovat värikohdat kiinteillä pituuksilla muuttavat säteittäisen liukuvärin renkaiksi.

### Vältä

- Prosentteja ympyrän koolle, mikä on virheellistä
- Kirkkaita hehkuja, jotka päättyvät koviin reunoihin, koska viimeinen värikohta on peittävä
- Jokaisen hehkun keskittämistä kohtaan 50% 50%
- Viittä päällekkäistä yhtä voimakasta hehkua

### Tee näin

- Pituuksia ympyröille, prosentteja ellipseille
- Häivytä jokainen hehku väriin `transparent`
- Sijoita hehkut sivuun keskeltä, kulmien lähelle tai reunan alle
- Yksi hallitseva hehku ja yksi tai kaksi hiljaisempaa

## FAQ

### Miten teen ympyräliukuvärin CSS:llä?

Käytä `radial-gradient(circle, väri1, väri2)`. Sanan `circle` lisääminen pitää muodon pyöreänä, ilman sitä saat ellipsin, joka venyy laatikon mukana.

### Miten siirrän säteittäisen liukuvärin keskipistettä?

Lisää muodon ja koon jälkeen `at` ja paikka, esimerkiksi `radial-gradient(circle at 20% 30%, #c4b5fd, #1e1b4b)`. Paikat toimivat kuten `background-position`.

### Mitä farthest-corner tarkoittaa?

Se mitoittaa liukuvärin niin, että sen viimeinen värikohta yltää keskipisteestä kauimpana olevaan laatikon kulmaan. Se on oletuskoko.

### Voiko ympyrän säteittäinen liukuväri käyttää prosenttikokoa?

Ei. Ympyrä tarvitsee yhden pituuden, kuten `200px`. Ellipsit voivat käyttää kahta prosenttia, kuten `ellipse 60% 40%`.

### Miten teen hehkutehosteen CSS-liukuväreillä?

Kerrosta yksi tai useampi `radial-gradient()`-arvo, jotka häipyvät puoliläpinäkyvästä väristä väriin `transparent`, tumman `background-color`in päälle.