# Liukuvärimuodot: aidon näköiset möykyt ja pallot

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

Liukuvärillä täytetty möykky on helppo. Valossa painavalta tuntuva möykky on eri asia. Ero syntyy viidestä pienestä valon suuntaan liittyvästä päätöksestä.

## The short version

- Liukuvärimuodot näyttävät kolmiulotteisilta, kun jokainen muoto varjostetaan saman kuvitellun valonlähteen mukaan.
- Uskottavassa pallossa on viisi aluetta: heijastus, valaistu puoli, ydinvarjo, heijastuneen valon kaista reunalla ja heittovarjo alla.
- CSS-pallo on ympyräelementti säteittäisellä liukuvärillä, jonka keskusta siirretään valoa kohti, esimerkiksi `circle at 30% 30%`.
- Möykyt ja orgaaniset muodot syntyvät epätasaisilla `border-radius`-arvoilla ja samalla säteittäisellä varjostuksella kuin pallo.
- Varjojen tulee olla muodon oman värin tummempi, viileämpi versio harmaan tai mustan sijaan.

**Liukuvärimuodot** ovat möykkyjä, hohtopalloja, palloja ja kapseleita, joiden värisiirtymä saa ne näyttämään valaistuilta ja tilavuudellisilta. Ne näyttävät aidoilta yhden valonlähteen mukaan varjostettuina: kirkas heijastus valon puolella, tummempi ydinvarjo kauempana, hento heijastuneen valon reuna ja pehmeä varjo pohjalla. Jos jokin puuttuu, muoto näyttää litteältä liukuväritarralta. Oikein tehtynä kaksi väriä riittää vihjaamaan kiinteään esineeseen.

## Miten valo osuu pyöreään muotoon

Maalarit ovat kuvanneet tätä vuosisatoja, ja se pätee jokaiseen piirtämääsi pyöreään muotoon. Valitse valosuunta ennen väriä ja varjosta alueet järjestyksessä. Ylävasen on totuttu suunta, mutta mikä tahansa toimii johdonmukaisesti käytettynä.

| Alue | Paikka | Väri |
| --- | --- | --- |
| Heijastus | Valoa lähin kohta | Lähes valkoinen, valon värillä sävytetty |
| Valaistu puoli | Valoa kohti oleva puolisko | Muodon oikea väri kirkkaimmillaan |
| Ydinvarjo | Pinnan kääntyessä valosta pois | Tummin kaista, hieman viileämpi |
| Heijastunut valo | Ohut reuna varjon puolella | Hieman ydinvarjoa vaaleampi |
| Heittovarjo | Alapuolisella pinnalla | Pehmeä, tumma, tummimmillaan kosketuksessa |

Valaistun pallon viisi aluetta. Heijastunut reunavalo unohtuu useimmin ja juuri se tekee pyöreydestä uskottavan.

## Kopioitavat varjostusohjeet

Nämä näytteet ovat valaistustutkielmia: varjostuksia ympyrän, sylinterin tai kartion sisälle. Kaikki valaistaan ylävasemmalta. Käytä niitä pyöristetyssä muodossa, niin saat kiinteältä näyttävän esineen.

- Pallon varjostus, violetti: `radial-gradient(circle at 30% 28%, #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%)`
- Pallon varjostus, meripihka: `radial-gradient(circle at 32% 30%, #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%)`
- Sylinterin varjostus, sinivihreä: `linear-gradient(90deg, #134e4a 0%, #2dd4bf 22%, #ccfbf1 32%, #14b8a6 50%, #0f3d3a 85%, #115e59 100%)`
- Kartion varjostus, indigo: `conic-gradient(from 200deg at 50% 50%, #1e1b4b, #a5b4fc, #eef2ff, #6366f1, #1e1b4b)`

Huomaa pallon ja sylinterin lopun pieni vaalennus: se on heijastunut valo varjoreunassa.

Pallo-ohjeet päättyvät edellistä hieman vaaleampaan väriin. Viimeinen pysäkki on heijastunut reuna, aivan ympyrän sisäreunassa rajauksen säilyttämiseksi. Ilman sitä muodon reuna kuolee ja näyttää reiältä pallon sijaan. [Säteittäinen liukuväri](https://gradiently.design/fi/guide/radial-gradient) selittää keskustan ja koon vaikutuksen hiipumiseen.

## Tee liukuväripallo CSS:llä

Tee elementistä ympyrä `border-radius: 50%`-arvolla ja siirrä liukuvärin keskusta valoa kohti. Ympyrä rajaa liukuvärin, jolloin heijastus on sivussa täydellisen pyöreän muodon sisällä. Sumennettu litistetty ellipsi alla luo heittovarjon.

```css
.sphere {
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%,
    #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%);
  position: relative;
}

.sphere::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30, 10, 70, 0.45) 0%, rgba(30, 10, 70, 0) 70%);
  filter: blur(6px);
  z-index: -1;
}

.blob {
  width: 280px;
  aspect-ratio: 1;
  border-radius: 62% 38% 46% 54% / 55% 42% 58% 45%;
  background: radial-gradient(circle at 32% 30%,
    #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%);
}
```

Violetti pallo pehmeällä heittovarjolla sekä meripihkanvärinen möykky kahdeksasta epätasaisesta kulmasäteestä.

> **Hengittävät möykyt** Animoi kahdeksaa `border-radius`-arvoa kahden sarjan välillä 8-12 sekunnissa pehmennetyllä alulla ja lopulla. Muoto huojuu hitaasti valaistuksen pysyessä paikallaan, mikä säilyttää uskottavuuden. Kunnioita [vähennetyn liikkeen](https://gradiently.design/fi/guide/reduced-motion) asetuksia.

## Möykyt, kapselit ja orgaaniset muodot

Möykyt tuntuvat ystävällisiltä ja pehmeiltä, joten ne ovat suosittuja hyvinvoinnin, ruoan, lasten ja luovien brändien ilmeissä. Valaistussäännöt ovat samat kuin pallolla, mutta pullistumat keräävät heijastuksia useaan paikkaan. Pidä yksi pääheijastus ja muut hentoina. Tyylistä kertoo [orgaaniset muodot suunnittelussa](https://gradiently.design/fi/guide/organic-shapes-design).

- **Kapseli:** sylinterin tavoin varjostettu pyöristetty suorakulmio, valo pituussuunnassa.
- **Kivi:** litistetty pallo, laaja vähäkontrastinen heijastus mattakiven tavoin.
- **Pisara:** pallo kirkkaalla terävällä heijastuksella ja vahvalla reunavalolla, mikä tuntuu kiiltävältä.
- **Pilvimöykky:** päällekkäiset ympyrät yhdellä yhteisellä heijastuksella näyttävät yhdeltä muodolta.

## Miksi liukuvärimuoto näyttää litteältä ja miten korjaat sen

### Näyttää litteältä

- Heijastus keskellä, kuin valo tulisi katsojasta
- Jokainen muoto valaistu eri suunnasta
- Harmaat tai mustat varjot
- Kova raja vaalean ja tumman välillä
- Ei heittovarjoa, joten muodot leijuvat

### Näyttää kiinteältä

- Heijastus yhtä valonlähdettä kohti
- Jokaisella muodolla sama valo
- Oman värin syvemmät, viileämmät varjot
- Pitkä asteittainen siirtymä ydinvarjoon
- Pehmeä varjo ankkuroi muodon pintaan

Värilämpötila tekee paljon. Lämmin valo antaa viileät varjot ja viileä lämpimät. Violetti pallo hieman vaaleanpunaisella heijastuksella ja sinivioletilla ydinvarjolla tuntuu aidommalta kuin vaaleasta tummanviolettiin kulkeva. [Lämpimät ja viileät värit](https://gradiently.design/fi/guide/warm-and-cool-colors) selittää parin.

## Liukuvärimuotojen käyttö sommittelussa

1. **Valitse yksi valonlähde** Kirjoita se: ylävasen, lämmin. Jokainen muoto, varjo ja heijastus seuraa sitä.
2. **Käytä kolmea kokoa** Yksi suuri, keskikokoinen ja pieni muoto tuntuvat syvyydeltä. Viisi samankokoista möykkyä konfetilta.
3. **Anna muotojen poistua kuvasta** Suurimman muodon rajaus reunasta saa kankaan tuntumaan rajojaan suuremmalta.
4. **Jätä rauhallinen tila sanoille** Muodot ovat levottomia. Aseta ne otsikon ympärille, älä taakse.
5. **Lisää rakeisuutta** Hieno kohina saa digitaalisen varjostuksen tuntumaan painetulta ja peittää raidoittumista. Katso [rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients).

Pystysuuntainen tuotejulkaisu uusista jäätelömauista, otsikon ympärillä pehmeät pyöreät liukuvärimuodot

Tuotejulkaisu koossa 1080×1350. Pyöreät valaistut muodot sanojen ympärillä, otsikko rauhallisella pohjalla.

Jos et halua varjostaa käsin, Gradientlyn Markit ovat elävä tausta kerrostettuine materiaaleineen, valoineen ja rakeisuuksineen. Ne renderöityvät siististi kaikissa suunnittelukoissa. Yhden hohtavan pallon pääkuvakäytöstä kertoo [liukuväripallot](https://gradiently.design/fi/guide/gradient-orb).

## FAQ

### Miten teen liukuvärimuodosta kolmiulotteisen?

Varjosta yhdestä valonlähteestä: heijastus valaistulle puolelle, tummempi ydinvarjo kauas, hieman vaaleampi reuna varjon puolelle ja pehmeä heittovarjo alle.

### Miten teen pallon CSS-liukuvärillä?

Anna elementille `border-radius: 50%` ja `radial-gradient(circle at 30% 30%, ...)`, joka kulkee lähes valkoisesta pääväriin ja tummaan sävyyn. Keskustan siirto valoa kohti vie heijastuksen sivuun.

### Miten teen möykkymuodon CSS:llä?

Käytä kahdeksaa epätasaista `border-radius`-arvoa, kuten `62% 38% 46% 54% / 55% 42% 58% 45%`, ja täytä säteittäisellä liukuvärillä.

### Minkä värinen liukuvärimuodon varjon tulee olla?

Muodon oman värin tummempi, hieman viileämpi versio. Harmaa tai musta saa värillisen muodon näyttämään likaiselta.