# Abstraktit taustat: muodot, värialueet ja virtaus

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

Abstrakti tausta välittää tunnelman kertomatta tarinaa, minkä vuoksi se on niin monen otsikon, dian ja tuotesivun takana. Oikean abstraktiotyypin valinta on suurin osa työstä.

## The short version

- Abstrakti tausta koostuu väristä, muodosta ja pinnasta tunnistettavan kohtauksen tai esineen sijaan.
- Useimmat abstraktit taustat kuuluvat kolmeen ryhmään: geometriset (terävät reunat ja kuviot), nestemäiset (pehmeät sävyvaihdokset ja virtaavat alueet) ja pintamaiset (rake, kohina ja materiaali).
- Geometrinen tausta tuntuu jäsennellyltä ja tarkalta, nestemäinen rauhalliselta tai eläväiseltä ja pintamainen fyysiseltä ja käsintehdyltä.
- Abstraktissakin taustassa tarvitaan rauhallinen, tasaisen vaalea alue kohtaan, jonne teksti tulee.
- Monet geometriset ja nestemäiset taustat voi rakentaa pelkällä CSS:llä lineaaristen, säteittäisten, kartiomaisten ja toistuvien liukuvärien avulla.

**Abstrakti tausta** rakentuu väristä, muodosta ja pinnasta tunnistettavan kohtauksen sijaan. Lähes kaikki kuuluvat yhteen kolmesta ryhmästä: **geometrisiin** taustoihin, jotka on tehty teräväreunaisista muodoista, raidoista ja kuvioista, **nestemäisiin** taustoihin, jotka rakentuvat pehmeistä sävyvaihdoksista ja virtaavista alueista, sekä **pintamaisiin** taustoihin, joissa on rakeisuutta, kohinaa ja materiaalin tuntua. Valitse ryhmä, joka vastaa tavoittelemaasi tunnelmaa, ja jätä rauhallinen alue kaikkialle, minne sanat tulevat.

Tässä oppaassa käydään läpi jokainen ryhmä elävin esimerkein ja koodein, kerrotaan, milloin mitäkin käytetään, ja miten estät abstraktia taustaa jyräämästä sisällön alleen. Monen taustan pohjalla olevista liukuvärityypeistä lisää artikkelissa [liukuvärien tyypit](https://gradiently.design/fi/guide/types-of-gradients).

## Kolme abstraktin taustan tyyppiä

| Tyyppi | Rakennusaineet | Tunnelma | Sopii |
| --- | --- | --- | --- |
| Geometrinen | Terävät pysähdykset, raidat, ruudukot, ympyrät, kiilat | Jäsennelty, tarkka, energinen | Teknologia, urheilu, tapahtumat, toimituksellinen ulkoasu |
| Nestemäinen | Pehmeät liukuvärit, meshit, hehkut, virtaavat kaistat | Rauhallinen, elävä, arvokas | Brändit, tuotesivut, hyvinvointi, musiikki |
| Pintamainen | Rake, kohina, paperi, kangas, lasi | Fyysinen, käsityömäinen, lämmin | Käsityö, ruoka, painotuotteet, muoti, kaikki käsintehty |

Kolme ryhmää. Monet hyvät taustat yhdistävät kaksi, esimerkiksi nestemäisen liukuvärin ja hienon rakeen.

## Geometriset abstraktit taustat

Geometrisissa taustoissa on terävät reunat: jaot, raidat, renkaat, kiilat ja ruudukot. Ne tuntuvat harkituilta ja jäsennellyiltä, ja ne sopivat luontevasti vahvoihin typografisiin asetteluihin, kuten [sveitsiläiseen tyyliin](https://gradiently.design/fi/guide/swiss-design). CSS:ssä reunat syntyvät kovista värien pysähdyskohdista, eli kahdesta värista samassa kohdassa.

- Diagonaalijako: `linear-gradient(135deg, #0f172a 0% 50%, #f97316 50% 100%)`
- Sävyraidat: `repeating-linear-gradient(45deg, #1e1b4b 0 18px, #312e81 18px 36px)`
- Nelijaettu väri: `conic-gradient(from 45deg, #f43f5e 0 25%, #f59e0b 0 50%, #10b981 0 75%, #3b82f6 0)`
- Auringonsäteet: `repeating-conic-gradient(from 0deg at 50% 100%, #fde68a 0deg 6deg, #fb923c 6deg 12deg)`
- Samankeskiset renkaat: `repeating-radial-gradient(circle at 50% 50%, #0b132b 0 14px, #1c2541 14px 28px)`
- Kolme kaistaa: `linear-gradient(90deg, #111827 0% 33.3%, #7c3aed 33.3% 66.6%, #f5f3ff 66.6% 100%)`

Kuusi geometrista taustaa, jokainen yksi CSS-liukuväri kovilla pysähdyskohdilla. Sävyltään lähekkäiset versiot, kuten raidat ja renkaat, ovat riittävän rauhallisia tekstille.

Geometristen taustojen kikka on sävy. Erittäin kontrastiset raidat tai ruudut väreilevät ja tekevät päälle tulevan tekstin lähes mahdottomaksi lukea. Pidä kuvion värit vaaleudeltaan lähellä toisiaan, kuten yllä olevissa sävyraidoissa ja renkaissa, ja säästä suuri kontrasti alueille, joilla ei ole sanoja. [CSS-kuvioita](https://gradiently.design/fi/guide/css-patterns) on paljon lisää.

## Nestemäiset abstraktit taustat

Nestemäisissä taustoissa ei ole lainkaan reunoja: väri kerääntyy, ajelehtii ja laskostuu kuin valo vedessä tai silkissä. Niihin kuuluvat mesh-liukuvärit, revontulihehkut ja virtaavat nauhat. Ne tuntuvat rauhallisemmilta ja arvokkaammilta kuin geometriset, ja niiden päälle on helpoin laittaa tekstiä, koska pehmeässä alueessa on suuria tasaisia kohtia.

- Nestemäinen ilta: `radial-gradient(ellipse at 20% 30%, #ff7a59 0%, #c43d7a 40%, #2b1055 100%)`
- Revontulinauha: `linear-gradient(170deg, #03121f 0%, #0b3b3a 40%, #2dd4bf 55%, #0b3b3a 70%, #03121f 100%)`
- Syvä vesi: `radial-gradient(ellipse at 70% 70%, #a5f3fc 0%, #60a5fa 35%, #3730a3 75%, #1e1b4b 100%)`
- Pastellikukinta: `radial-gradient(circle at 35% 40%, #fef3c7 0%, #fbcfe8 40%, #c4b5fd 80%, #a78bfa 100%)`

Nestemäisiä alueita yksittäisinä liukuväreinä. Oikeat nestemäiset taustat kerrostavat useita tällaisia, ja juuri niin CSS-mesh-liukuvärit rakennetaan.

```css
.fluid {
  background-color: #2b1055;
  background-image:
    radial-gradient(40% 50% at 20% 30%, #ff7a59cc, transparent 70%),
    radial-gradient(45% 55% at 80% 25%, #c43d7acc, transparent 70%),
    radial-gradient(50% 60% at 60% 85%, #5b3cc4cc, transparent 70%);
}
```

Nestemäinen tausta kolmesta päällekkäisestä säteittäisestä hehkusta syvällä pohjalla. Siirtämällä `at`-kohtia ohjaat, mihin valo kerääntyy.

Nestemäisillä taustoilla on omat nimetyt tyylinsä: [mesh-liukuvärit](https://gradiently.design/fi/guide/mesh-gradients) sekoittavat useita värikohtia pinnalle, ja [revontuliliukuvärit](https://gradiently.design/fi/guide/aurora-gradients) kelluttavat hohtavia läiskiä tummalla pohjalla. Molemmat näyttävät parhailta, kun päällä on hieman rakeisuutta.

## Pintamaiset abstraktit taustat

Pinta muuttaa tasaisen värin pinnaksi, jota melkein voi koskettaa. Hieno rake näyttää filmiltä, karkeampi pinta paperilta, pehmeät kuidut kankaalta ja himmeä sumennus lasilta. Pinta voi olla koko tausta, kuten paperinvärisessä alueessa, tai kerros liukuvärin päällä, ja juuri niin useimmat arvokkaan näköiset liukuvärit tehdään.

Pystysuuntainen lehtityylinen julkaisu, jossa otsikko on pehmeästi rakeisella lämpimällä taustalla

Pintamainen alue käsityöbrändille: pinta itse antaa sävyn.

Pystysuuntainen julkaisutiedote, jossa otsikko on sileällä viileällä nestemäisellä liukuvärillä

Nestemäinen alue ohjelmistojulkaisulle: rauhallinen, kirkas ja puhdas.

Pidä pinta hienovaraisena, kun tekstiä tulee päälle: tarpeeksi, jotta se tuntuu käden ulottuvilla, mutta ei niin paljon, että kirjaimet näyttävät likaisilta. [Taustatekstuurit](https://gradiently.design/fi/guide/background-texture) käsittelee rakeen, paperin, kankaan ja lasin tarkemmin, ja [rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) selittää, miksi pieni kohina saa värin näyttämään arvokkaalta.

## Abstraktin taustan tekeminen brändin väreistä

Parhaat abstraktit taustat näyttävät abstrakteilta mutta kuuluvat jollekulle. Kun lähdet omista väreistäsi ja muodoistasi etkä valmiista kuvapaketista, taustasta tulee omanlaisesi.

1. **Ota kaksi tai kolme brändiväriä** Lisää yksi syvempi sävy samasta perheestä, jotta syntyy syvyyttä. Jos värit puuttuvat vielä, apua löytyy artikkelista [brändivärien valinta](https://gradiently.design/fi/guide/how-to-choose-brand-colors).
2. **Valitse ryhmä** Geometrinen, jos brändisi on tarkka tai energinen, nestemäinen, jos se on rauhallinen tai arvokas, pintamainen, jos se on käsityömäinen tai lämmin.
3. **Lainaa muoto brändistä** Käyrä logosta, kirjaimen kulma, ympyrä kuvakkeesta. Kun toistat sitä taustassa, kokonaisuus sitoutuu yhteen.
4. **Suunnittele hiljainen alue** Päätä, mihin teksti tulee kussakin koossa, ja pidä se alue vaaleudeltaan tasaisena.
5. **Lisää pinta viimeisenä** Kevyt rake kaiken päälle, ja tarkista sitten puhelimen koossa oikeilla sanoilla.

## Abstraktin taustan valinta tehtävään

### Vältä

- Erittäin kontrastisia kuvioita leipätekstin takana
- Kolmea abstraktion lajia samassa suunnitelmassa
- Satunnaisia muotoja, joilla ei ole yhteyttä brändiin
- Taustaa, joka on niin vilkas, että siitä tulee viesti

### Tee näin

- Sävykuvioita tai pidä kuviot poissa sanojen alta
- Yksi tyyppi, pinta tukikerroksena
- Muotoja ja värejä, jotka toistavat brändiäsi
- Tausta, joka luo tunnelman ja väistyy sitten

Sovita abstraktio sisältöön. Dataa täynnä oleva dia tarvitsee hiljaisen nestemäisen tai sävyiltään tasaisen alueen. Lanseerausjulkaisu kestää rohkean geometrisen jaon. Ruokalista tai käsityötuote kaipaa pintaa. Ja mitä tahansa valitset, testaa se oikeassa koossa oikeilla sanoilla, sillä tyhjänä kauniit abstraktit taustat taistelevat usein tekstiä vastaan, kun se saapuu.

Gradientlyn Markit ovat nestemäisiä ja pintamaisia abstraktioita yhdessä: värejä, jopa kolme päällekkäistä materiaalia, valoa, rakeisuutta ja liikettä, jotka piirtyvät livenä suunnitelmasi taakse niin, että niiden rauhallisin alue siirtyy sanojen taakse. Voit selata niitä Markkinoilla tai tehdä oman Forgessa.

## FAQ

### Mikä on abstrakti tausta?

Tausta, joka koostuu väristä, muodosta ja pinnasta tunnistettavan kohtauksen sijaan. Useimmat ovat geometrisia, nestemäisiä tai pintamaisia tai näiden yhdistelmiä.

### Miten teen abstraktin taustan CSS:llä?

Käytä kovilla pysähdyskohdilla varustettuja lineaarisia, kartiomaisia ja toistuvia liukuvärejä geometrisiin kuvioihin ja kerrostettuja säteittäisiä liukuvärejä nestemäisiin alueisiin. Lisää SVG-kohinakerros pinnaksi.

### Mikä abstrakti tausta sopii parhaiten tekstille?

Nestemäiset taustat, joissa on suuria tasaisia alueita, ovat helpoimpia, ja seuraavina sävyiltään yhtenäiset geometriset kuviot. Vältä kontrastisia kuvioita sanojen takana.

### Mikä saa abstraktin taustan näyttämään arvokkaalta?

Hillitseminen: rajattu paletti, pehmeä valo, hieno pinta ja rauhallinen alue sisällön alla. Vilkas, kontrastinen abstraktio näyttää yleensä halvemmalta.