# Sumennetut liukuvärit: modernia pehmeää väriä

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

Sumennetut liukuvärit näyttävät huurrelasin tai epätarkan linssin läpi nähdyltä väriltä. Ne ovat rauhallisia, moderneja ja helppoja tehdä huonosti. Tässä menetelmä lukuineen.

## The short version

- Sumennettu liukuväri tehdään asettamalla pohjalle muutama pehmeä värimuoto ja sumentamalla, kunnes reunoja ei enää näy.
- Sumennettu liukuväri eroaa revontuliliukuväristä: revontulet ovat valonauhoja tummalla taivaalla, sumennus hajanaista väriä ilman suuntaa tai rakennetta.
- Sumennussäteen pitäisi olla suuri suhteessa pohjaan, noin 10-20 prosenttia lyhyemmästä sivusta. Muuten muodot näyttävät yhä läiskiltä.
- Kolme tai neljä lähekkäistä väriä sumenee puhtaasti. Vastakkaiset värit harmaantuvat limittäisillä alueilla.
- Sileä sumennettu väri raidoittuu helposti, joten lisää päälle hieno raekerros ennen vientiä.

**Sumennettu liukuväri** on väriä ilman reunoja: muutama pehmeä muoto pohjalla, sumennettuna kunnes jäljellä on vain sävystä toiseen ajelehtiva valo. Se näyttää huurrelasin läpi otetulta kuvalta tai valaistuun kaupunkiin suunnatulta epätarkalta linssiltä. Pehmeys sopii hyvinvointisovelluksiin, musiikkiin, ihonhoitoon, rauhalliseen teknologiaan ja taustakuviin. Menetelmä on yksinkertainen: ensin muodot, sitten paljon sumennusta, lopuksi rae. Alla olevat yksityiskohdat ratkaisevat, näyttääkö tulos unenomaiselta vai tuhruiselta.

## Sumennetut, revontuli- ja mesh-liukuvärit

Nämä kolme sekoitetaan helposti, koska kaikki näyttävät pehmeiltä. Ne perustuvat eri ajatuksiin, ja oikean valitseminen muuttaa suunnittelutehtävää.

| Tyyli | Ulkonäkö | Rakenne |
| --- | --- | --- |
| Sumennettu liukuväri | Hajanaista väriä ilman suuntaa, kuin pehmeä tarkennus | Voimakkaasti sumennetut muodot pohjalla |
| [Revontuliliukuväri](https://gradiently.design/fi/guide/aurora-gradients) | Valonauhoja tai -verhoja tummalla taivaalla | Venytetyt juovat, joilla on selkeä virtaus |
| [Mesh-liukuväri](https://gradiently.design/fi/guide/mesh-gradients) | Ruudukossa yhdistyvät sileät värikentät | Verkon yli sekoitetut väripisteet |
| Lineaarinen liukuväri | Suora liuku yhdestä väristä toiseen | Väripisteet viivalla |

Sumennetulla liukuvärillä ei ole seurattavaa rakennetta. Jos näet suunnan tai muodon, kyse on jostakin muusta.

## Näin teet sumennetun liukuvärin

1. **Valitse pohja** Vaalea luonnonvalkoinen ilmavaan ilmeeseen, syvä muste hohtavaan. Pohja täyttää kaikki muotojen jättämät aukot.
2. **Valitse kolme tai neljä naapuriväriä** Väriympyrässä lähekkäiset värit, kuten pinkki, syreeni ja taivaansininen, muodostavat puhtaat välisävyt. [Lähivärit](https://gradiently.design/fi/guide/analogous-colors) tarjoaa lisää yhdistelmiä.
3. **Piirrä suuria päällekkäisiä muotoja** Kolmesta viiteen ympyrää tai soikiota, joista kukin peittää neljänneksen tai puolet pohjasta. Anna osan jatkua reunojen yli.
4. **Sumenna voimakkaasti** Käytä Gaussin sumennusta noin 10-20 prosenttia pohjan lyhyemmästä sivusta. 1080 pikseliä leveässä postauksessa se on noin 110-220 pikseliä.
5. **Lisää rae** Hieno kohinakerros 3-6 prosentin peittävyydellä piilottaa raidoittumisen ja estää muovisen vaikutelman.
6. **Tarkista puhelinkoossa** Pienennä kuvaa. Jos jollakin muodolla on yhä näkyvä reuna, sumenna lisää tai suurenna muotoa.

## Sumennettujen liukuvärien värireseptit

Jokainen näyte jäljittelee valmista ilmettä yhdellä liukuvärillä. Voit kopioida sen suoraan CSS:ään tai käyttää värejä muodoissasi. Keskeltä sivuun asetetut elliptiset säteittäisliukuvärit pääsevät yllättävän lähelle oikeaa sumennusta.

- Aamu-utu: `radial-gradient(ellipse 90% 70% at 25% 30%, #fbcfe8 0%, #e9d5ff 35%, #bfdbfe 70%, #f8fafc 100%)`
- Persikankukka: `radial-gradient(ellipse 80% 90% at 70% 60%, #fde68a 0%, #fdba74 30%, #fda4af 60%, #fdf2f8 100%)`
- Minttusumu: `radial-gradient(ellipse 85% 75% at 35% 65%, #a7f3d0 0%, #99f6e4 30%, #bae6fd 65%, #f0f9ff 100%)`
- Yön bokeh: `radial-gradient(ellipse 70% 80% at 65% 35%, #a78bfa 0%, #6366f1 30%, #1e1b4b 70%, #0b0a1a 100%)`
- Klubivalot: `radial-gradient(ellipse 90% 80% at 30% 70%, #fb7185 0%, #c026d3 35%, #3b0764 72%, #12051f 100%)`
- Pellavasumennus: `linear-gradient(160deg, #e7e5e4 0%, #d6d3d1 30%, #fcd9bd 60%, #f5f5f4 100%)`

Kolme vaaleaa ja kolme tummaa. Vaalea sumennus tuntuu ilmavalta ja toimitukselliselta, tumma epätarkasti nähdyiltä yövaloilla.

Valitse perhe päälle tulevan sisällön mukaan. Vaaleat sumennukset kantavat tummaa tekstiä ja sopivat ihonhoitoon, paperituotteisiin, hyvinvointiin ja toimituksellisiin kansiin. Tummat saavat vaalean tekstin hohtamaan ja sopivat yöelämään, musiikkiin ja myöhäisiin tapahtumiin. Neutraali, kuten pellavan sävyinen sumennus, toimii hiljaisena tuotekuvan taustana, jossa väri ei saa kilpailla esineen kanssa. Lisää pehmeitä paletteja löydät oppaasta [unenomaiset liukuvärit](https://gradiently.design/fi/guide/dreamy-gradients).

## Kuinka paljon liukuväriä pitää sumentaa

Useimmat sumennetut liukuvärit epäonnistuvat, koska sumennusta on liian vähän. 30 pikselin sumennus 1080 pikselin pohjalla on yhä pehmeäreunainen muoto, joka näyttää läiskältä. Sumennuksen on oltava niin suuri, ettei yhden muodon loppua voi erottaa.

| Pohja | Koko | Aloitussumennus |
| --- | --- | --- |
| Instagram-postaus | 1080×1350 | 110-220 px |
| Tarina tai puhelimen taustakuva | 1080×1920 | 110-220 px |
| Verkkosivun pääkuva | 1920×1080 | 110-220 px |
| YouTube-pikkukuva | 1280×720 | 70-145 px |
| A4-juliste, 300 dpi | 2480×3508 | 250-500 px |

Lähtökohdat ovat 10-20 prosenttia lyhyemmästä sivusta. Suuremmat muodot tarvitsevat vähemmän sumennusta, pienemmät enemmän.

## Sumennettu liukuväri CSS:llä

Verkossa on kaksi tapaa. Läpinäkyvään häipyvät kerrostetut säteittäisliukuvärit ovat kevyitä ja renderöityvät heti. Oikeat sumennetut elementit näyttävät pehmeämmiltä ja voivat liikkua, mutta piirtäminen on raskaampaa. Staattiseen taustaan kerrokset yleensä riittävät.

```css
/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }
```

Tapa 1 on pehmeä staattinen aamu-utu. Tapa 2 käyttää kolmea sumennettua ympyrää, joita voit liikuttaa hitaasti transformilla.

Jos tarvitset huurretun paneelin sumennetun taustan päälle itse taustan sijaan, käytä `backdrop-filter`-ominaisuutta. Sitä käsittelee [CSS-taustan suodatus](https://gradiently.design/fi/guide/css-blur-background).

## Miksi sumennettu liukuväri näyttää halvalta ja miten korjaat sen

### Tuhruinen

- Muodot näkyvät yhä pehmeinä läiskinä
- Vastavärit harmaantuvat limittäisillä alueilla
- Tasainen keskitetty sommittelu
- Täydellisen sileä pinta, jonka häivytyksissä näkyy raitoja
- Sanat kylläisimmän alueen päällä

### Unenomainen

- Niin laaja sumennus, ettei reunoja jää
- Naapurivärit, jotka sekoittuvat puhtaiksi välisävyiksi
- Yksi hallitseva värimassa keskikohdan ulkopuolella
- Hieno rae kaiken päällä
- Sanat vaaleimmalla tai syvimmällä alueella

Raidoittuminen yllättää kaikki, sillä sumennus luo pitkiä lempeitä häivytyksiä monen pikselin yli. Pieni rae korjaa sen. [Liukuvärien raidoittuminen](https://gradiently.design/fi/guide/gradient-banding) selittää syyn. Jos kaksi väriä kohtaa harmaana, vaihda toinen naapuriväriin, kuten [sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) neuvoo.

Pystytarina, jossa lukee Hengitä sisään pehmeällä vaalealla sumennetulla pinkin ja syreenin taustalla

Meditaatiosovelluksen tarina koossa 1080×1920. Pehmeää väriä, lyhyet sanat, ei teräviä reunoja.

Gradientlyn Markeissa on pehmeitä hajanaisia materiaaleja sisäänrakennetulla rakeella. Ne pitävät sanojesi taustan rauhallisena, joten sumennettu ilme ei niele otsikkoa. Voit suunnitella Studiossa ilmaiseksi millä tahansa lunastamattomalla Markilla.

## FAQ

### Miten teen sumennetun liukuvärin?

Aseta tasaiselle pohjalle kolmesta viiteen suurta muotoa naapuriväreissä. Käytä voimakasta Gaussin sumennusta noin 10-20 prosenttia pohjan lyhyemmästä sivusta ja lisää kevyt raekerros.

### Mitä eroa on sumennetulla ja revontuliliukuvärillä?

Revontuliliukuvärissä on selvästi virtaavia valonauhoja, yleensä tummalla taivaalla. Sumennettu liukuväri on hajanaista väriä ilman suuntaa tai näkyvää rakennetta.

### Voinko tehdä sumennetun liukuvärin pelkällä CSS:llä?

Kyllä. Kerrosta useita läpinäkyvään häipyviä säteittäisliukuvärejä tai sumenna absoluuttisesti sijoitettuja ympyröitä `filter: blur()` -määrittelyllä.

### Miksi sumennetussa liukuvärissäni näkyy raitoja?

Pitkissä lempeissä häivytyksissä on vähän erillisiä väriaskelia, joten raidat näkyvät. Lisää hienoa raetta ja vie PNG pakatun JPEG:n sijaan.