# Liukuväripallo: hohtavat pallot pääkuviin ja kansiin

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

Yksi hohtava pallo tummalla pohjalla voi kantaa koko laskeutumissivun tai levynkannen. Se näyttää vaivattomalta, mutta on helppo tehdä väärin. Tässä ohjeet ja sijoittelun säännöt.

## The short version

- Liukuväripallo on säteittäisellä liukuvärillä tehty hohtava pallo, jonka kirkas ydin häipyy kylläisen värin kautta tummaan pohjaan.
- Tavallisia tyylejä on kolme: reunaton pehmeä hohto, teräväreunainen valaistu pallo ja pimeäkeskinen pimennysrengas.
- Pallo hohtaa uskottavasti vain tummalla tai syvänvärisellä pohjalla, sillä hohto perustuu ympäristön kontrastiin.
- Sijoita pallo etäälle otsikosta, yleensä ylös sivulle, ja sanat rauhalliselle pohjalle.
- CSS:ssä pallo on säteittäinen liukuvärikerros tai sumennettu ympyräelementti sisällön takana.

**Liukuväripallo** on säteittäisellä liukuvärillä tehty hohtava pallo: kirkas ydin, kylläinen värikaista ja pitkä häivytys tummaan pohjaan. Se on suosittu tuotelanseeraussivuilla, sovellusten pääkuvissa, podcast-kuvissa ja levynkansissa, koska yksi muoto antaa katseen kiintopisteen, syvyyttä ja energiaa ilman valokuvaa. Ohje on lyhyt. Vaikuttavan pallon erottaa sumeasta möykystä pohja, ytimen väri ja sijoittelu.

## Kolme liukuväripallon tyyppiä

- **Pehmeä hohtopallo:** ei lainkaan reunaa, vain pimeästä leviävää valoa. Rauhallinen ja tunnelmallinen, sopii suurten sommitelmien taakse.
- **Valaistu pallo:** terävä pyöreä reuna ja heijastus toisella sivulla, kuin planeetta tai lasipallo. Vahva ja graafinen. Valaistussäännöt ovat [liukuvärimuodoissa](https://gradiently.design/fi/guide/gradient-shapes).
- **Pimennysrengas:** tumma kiekko, jonka reunan ympäri vuotaa valoa. Dramaattinen ja yöllinen, suosittu musiikissa ja tekniikassa.

## Liukuväripallon ohjeet

Jokainen ohje on yksi `radial-gradient()`, jonka voit liittää CSS:ään tai suunnittelutyökaluun. Ensimmäinen pysäkki on ydin, keskimmäiset värillinen pinta ja viimeinen pohja. Pohjapysäkin siirto kauemmas leventää hohtoa.

- Violetti hohto: `radial-gradient(circle at 50% 50%, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`
- Syaani hohto: `radial-gradient(circle at 50% 50%, #ecfeff 0%, #67e8f9 9%, #0891b2 24%, #083344 48%, #020617 74%)`
- Hiilloksen hohto: `radial-gradient(circle at 50% 50%, #fff7ed 0%, #fdba74 10%, #f43f5e 28%, #4c0519 52%, #0c0507 76%)`
- Smaragdin hohto: `radial-gradient(circle at 50% 50%, #f0fdf4 0%, #86efac 8%, #059669 22%, #022c22 46%, #010805 72%)`
- Pimennysrengas: `radial-gradient(circle at 50% 50%, #0b0a1a 0%, #0b0a1a 24%, #fde68a 25%, #f97316 28%, #7c2d12 38%, #0b0a1a 60%)`
- Helmiäishohto: `radial-gradient(circle at 50% 50%, #fdf2f8 0%, #f9a8d4 12%, #a855f7 30%, #3b82f6 46%, #0b1026 70%)`

Kuusi palloa tummilla pohjilla. Helmiäinen vaihtaa häipyessään sävyä vaaleanpunaisesta violettiin ja siniseen, mikä tuntuu kiiltävältä pinnalta.

Vältä puhtaan valkoista ydintä. Pallon omalla värillä sävytetty valkoinen, kuten violetin pallon `#faf5ff`, pitää keskustan valoisana ilman puhkipalamista. Vältä myös puhdasta mustaa pohjaa: lähes musta, jossa on ripaus pallon sävyä, liittää hohdon tilaan.

## Miksi pallo tarvitsee tumman pohjan

Hohto on kontrastia. Valkoisella sivulla sama violetti pallo näyttää mustelmalta, syvällä musteen värisellä pohjalla valolta. Jos brändisi käyttää vaaleita taustoja, valitse vaalea pastellipallo ja leveä pehmeä häivytys. Hyväksy, että se näyttää väriläikältä hohdon sijaan. [Tummat liukuväritaustat](https://gradiently.design/fi/guide/dark-gradient-backgrounds) tarjoaa pohjia kaikille yllä oleville palloille.

- Mustevioletti pohja: #0b0a1a
- Mustelaivastonsininen pohja: #020617
- Mustepunainen pohja: #0c0507
- Mustevihreä pohja: #010805

Neljä lähes mustaa, kukin yhtä palloa kohti sävytetty. Sovita pohja palloon, niin hohto näyttää luonnolliselta.

## Mihin sijoitat liukuväripallon

Pallo on kuvan kirkkain asia, joten se vetää katseen ensimmäisenä. Se on etu otsikon vierellä ja ongelma otsikon alla. Aseta pallo ylös sivulle, rajaa suuri pallo reunasta ja pidä sanat rauhallisella tummalla pohjalla. Älä käytä palloa tekstin takaisena hohtona: se heikentää kontrastia juuri tärkeimmässä kohdassa.

- Verkkosivun pääkuva 1920×1080: 1920 × 1080
- Instagram-julkaisu 1080×1350: 1080 × 1350
- Soittolistan kansi 1080×1080: 1080 × 1080
- Tarina 1080×1920: 1080 × 1920

Leveässä pääkuvassa pallo tulee otsikon vastakkaiselle puolelle. Pystymuodossa yläkolmannekseen ja sanat sen alle.

Neliömäinen podcast-kansi, ylhäällä hohtava violetti valo ja ohjelman otsikko sen alla tummalla pohjalla

Podcast-kansi koossa 3000×3000. Valo on otsikon yläpuolella, ei sen alla.

Leveä tuotelanseerausbanneri, otsikko vasemmalla ja kirkas hohtava alue oikealla

1920×1080-lanseerauspääkuva, sanat vasemmalla ja kirkkain alue oikealla.

## Liukuväripallo pääkuvassa CSS:llä

Yksinkertaisin tapa on säteittäinen liukuvärikerros itse osiossa. Pehmeämpään, orgaanisempaan hohtoon käytä erillistä voimakkaasti sumennettua ympyräelementtiä. Voit myös animoida sitä hitaasti piirtämättä koko osiota uudelleen.

```css
.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 30%, #faf5ff 0%, #c4b5fd 6%, #7c3aed 16%, #2e1065 34%, transparent 55%),
    #0b0a1a;
  color: #f5f3ff;
}

/* Optional: a soft second light, blurred */
.hero::before {
  content: "";
  position: absolute;
  width: 40vmax;
  aspect-ratio: 1;
  left: -12vmax;
  bottom: -18vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #0891b2 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
}

.hero > * {
  position: relative;
}
```

Violetti pallo yläoikealla mustepohjalla, hento syaanivalo vuotaa alavasemmalta. Sisältö on molempien päällä.

> **Suuri sumennus kuormittaa** Liikkuvan elementin suuri `filter: blur()` voi pudottaa ruutuja vanhoissa puhelimissa. Animoi vain `transform`-ominaisuutta, pidä sumennussäde maltillisena ja lue [CSS-liukuvärin suorituskyky](https://gradiently.design/fi/guide/css-gradient-performance) ennen julkaisua.

## Liukuväripallon animointi

Muutaman prosentin ajelehtiva tai hieman suuremmaksi ja pienemmäksi hengittävä pallo tuntuu elävältä häiritsemättä sanoja. Pidä jakso pitkänä, noin 10-20 sekuntia, ja pehmennä alku ja loppu, jotta liike ei tunnu käynnistyvän tai pysähtyvän. Vie someen lyhyt silmukka, jonka viimeinen ruutu vastaa ensimmäistä; [saumaton videosilmukka](https://gradiently.design/fi/guide/seamless-loop-video) kertoo miten. Verkossa liikuta sumennettua elementtiä `transform`-ominaisuudella ja poista liike sitä pyytäviltä käyttäjiltä [vähennetyn liikkeen](https://gradiently.design/fi/guide/reduced-motion) avulla.

## Tee liukuväripallosta omaperäinen

### Tavanomainen pallo

- Violetista siniseen, keskellä mustalla
- Puhdas valkoinen ydin palaa puhki
- Otsikon takana
- Täysin sileä, häivytys raidoittuu

### Harkittu pallo

- Brändiväri, jonka sävy vaihtuu häivytyksessä
- Sävytetty ydin pysyy valoisana
- Sivussa, rajattu, sanat rauhallisella pohjalla
- Hieno rakeisuus pitää häivytyksen tasaisena

Pallo on jo niin tavallinen, että oletusversio näyttää pohjalta. Toinen himmeämpi valo, sävynvaihto häivytyksessä tai [rakeisuuskerros](https://gradiently.design/fi/guide/grainy-gradients) tekee siitä tunnistettavamman. Gradientlyn Markit menevät pidemmälle: jokainen on elävä tausta omine valoineen, materiaaleineen ja liikkeineen. Ne tarkistetaan niin, ettei kaksi näytä samalta, ja ne renderöityvät kaikissa suunnittelukoissa. Selaa tummia Markeja Markkinoilla ja suunnittele maksutta millä tahansa lunastamattomalla Markilla.

## FAQ

### Miten teen liukuväripallon?

Käytä säteittäistä liukuväriä, jossa on sävytetty valkoinen ydin, kylläinen värikaista ja tumma pohja, esimerkiksi `radial-gradient(circle, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`.

### Mikä tausta sopii liukuväripallon taakse?

Lähes musta, pallon väriin sävytetty pohja. Hohto näyttää hohdolta vain tummaa ympäristöä vasten.

### Voinko laittaa tekstiä liukuväripallon päälle?

Vältä sitä. Pallo on kuvan kirkkain osa, joten teksti menettää kontrastin. Aseta pallo sivulle ja sanat rauhalliselle pohjalle.

### Miten teen sumean pallon CSS:llä?

Luo ympyräelementti, jonka säteittäinen liukuväri häipyy läpinäkyväksi, ja lisää `filter: blur()`. Aseta se absoluuttisesti sisällön taakse.