Summary  
This chapter explains how to apply and control background colors in CSS using various formats (named, hex, RGB/RGBA) and how to create smooth linear and radial gradients by specifying directions and color stops.

General domain of usage  
Web interface styling

Discover how to use background colors in CSS, from simple solid colors to advanced gradients. See practical examples of background-color, linear-gradient, and radial-gradient properties in action. Learn how each technique can enhance the look and feel of your web pages. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

**Taustaväri** verkkosivustolla vaikuttaa merkittävästi sivuston tunnelmaan ja ilmapiiriin. Se on yksi tärkeimmistä visuaalisista elementeistä, jonka käyttäjät näkevät vieraillessaan sivustolla, ja sillä on suuri vaikutus sivuston yleisilmeeseen ja -tuntumaan.

## background-color
Tämän ominaisuuden avulla voidaan asettaa elementin taustaväri. Arvo voi olla missä tahansa muodossa: hex, rgb, rgba tai varattu sana.
```css
background-color: value;
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXY+CiAgICAgIFRoZSBzdW4gd2FzIHNldHRpbmcgb3ZlciB0aGUgaG9yaXpvbiwgY2FzdGluZyBhIHdhcm0gZ2xvdyBvdmVyIHRoZSB0cmVlcy4KICAgICAgQmlyZHMgY2hpcnBlZCBoYXBwaWx5IGluIHRoZSBkaXN0YW5jZSwgd2hpbGUgYSBnZW50bGUgYnJlZXplIHJ1c3RsZWQgdGhlCiAgICAgIGxlYXZlcy4gSXQgd2FzIGEgcGVhY2VmdWwgZXZlbmluZywgYW5kIGZvciBhIG1vbWVudCwgZXZlcnl0aGluZyBmZWx0IHJpZ2h0CiAgICAgIGluIHRoZSB3b3JsZC4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

ZGl2IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaW1lZ3JlZW47CiAgY29sb3I6ICMxZTFlMWU7Cn0=

## Staattinen vs. liukuväri
**Staattinen väri** tarkoittaa yksittäistä värin arvoa, joka asetetaan tasaisesti elementille, kuten `red` tai `#0000FF`. **Liukuväri** puolestaan tarkoittaa kahden tai useamman värin yhdistämistä, jolloin syntyy pehmeä siirtymä värien välillä.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9InN0YXRpYy1jb2xvciI+PC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImdyYWRpZW50LWNvbG9yIj48L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LmNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKfQoKLnN0YXRpYy1jb2xvciB7CiAgd2lkdGg6IDE1MHB4OwogIGhlaWdodDogMTUwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmVkOwp9CgouZ3JhZGllbnQtY29sb3IgewogIHdpZHRoOiAxNTBweDsKICBoZWlnaHQ6IDE1MHB4OwogIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCh0byByaWdodCwgIzNhNjE4NiwgIzg5MjUzZSk7Cn0=

Liukuvärin avulla voidaan luoda visuaalisesti houkuttelevampia ja dynaamisempia suunnitteluratkaisuja kuin staattisella värillä. Tarkastellaan erilaisia tapoja määritellä liukuvärejä.

## Hieno lineaarinen liukuväri
Lineaarisen liukuvärin taustavärin asettamiseen käytetään:
```css
background-image: linear-gradient("direction", "color1", "color2", ...);
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+dG8gYm90dG9tPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+dG8gcmlnaHQ8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij50byB0b3A8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij50byBsZWZ0PC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

OnJvb3QgewogIC0tc3RhcnRpbmctY29sb3I6IHJnYigyMDQsIDQzLCA5NCk7CiAgLS1lbmRpbmctY29sb3I6IHJnYigxMTcsIDU4LCAxMzYpOwp9CgouY29udGFpbmVyIHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtd3JhcDogd3JhcDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKfQoKLmJveCB7CiAgbWFyZ2luOiAxMHB4OwogIHdpZHRoOiAyNDBweDsKICBoZWlnaHQ6IDI0MHB4OwogIC8qIHB1dCB0aGUgYm94IHRleHQgaW4gdGhlIGNlbnRlciBvZiB0aGUgYm94ICovCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBjb2xvcjogd2hpdGU7CiAgZm9udC1zaXplOiAyNHB4OwogIGZvbnQtd2VpZ2h0OiA1MDA7Cn0KCi5ib3g6bnRoLWNoaWxkKDEpIHsKICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoCiAgICB0byBib3R0b20sCiAgICB2YXIoLS1zdGFydGluZy1jb2xvciksCiAgICB2YXIoLS1lbmRpbmctY29sb3IpCiAgKTsKfQoKLmJveDpudGgtY2hpbGQoMikgewogIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCgKICAgIHRvIHJpZ2h0LAogICAgdmFyKC0tc3RhcnRpbmctY29sb3IpLAogICAgdmFyKC0tZW5kaW5nLWNvbG9yKQogICk7Cn0KCi5ib3g6bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoCiAgICB0byB0b3AsCiAgICB2YXIoLS1zdGFydGluZy1jb2xvciksCiAgICB2YXIoLS1lbmRpbmctY29sb3IpCiAgKTsKfQoKLmJveDpudGgtY2hpbGQoNCkgewogIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCgKICAgIHRvIGxlZnQsCiAgICB2YXIoLS1zdGFydGluZy1jb2xvciksCiAgICB2YXIoLS1lbmRpbmctY29sb3IpCiAgKTsKfQ==

Voimme myös määrittää värin prosenttiosuuden liukuvärissä.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT48L2JvZHk+CjwvaHRtbD4=

Ym9keSB7CiAgYmFja2dyb3VuZC1pbWFnZTogbGluZWFyLWdyYWRpZW50KAogICAgdG8gcmlnaHQsCiAgICAjNzE0OWM2IDEwJSwKICAgICNmYzI5NDcgNDAlLAogICAgI2ZlNjI0NCA2MCUsCiAgICAjZmZkZWI5CiAgKTsKfQ==

## Yhtenäinen linear-gradient
Raidallinen taustaväri saadaan, kun vierekkäisille väreille määritetään sama prosenttiosuus. Suoritetaan esimerkki ja tarkastellaan, mikä ero syntyy.

Ym9keSB7CiAgYmFja2dyb3VuZC1pbWFnZTogbGluZWFyLWdyYWRpZW50KAogICAgdG8gcmlnaHQsCiAgICAjNzE0OWM2IDEwJSwKICAgICNmYzI5NDcgMTAlLAogICAgI2ZlNjI0NCAzMCUsCiAgICAjZmZkZWI5IDMwJSwKICAgICMwMDIzNWIgNDAlLAogICAgI2ZmZGQ4MyA0MCUKICApOwp9

## radial-gradient
**Radiaaligradientti** toimii samalla tavalla kuin lineaarinen gradientti. Ainoa ero on, että väri alkaa keskeltä ja leviää ulospäin.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+ZGVmYXVsdCByYWRpYWw8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij5jaXJjbGUgYXQgcmlnaHQgdG9wPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+Y2lyY2xlIGF0IGxlZnQgYm90dG9tPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

OnJvb3QgewogIC0tc3RhcnRpbmctY29sb3I6ICMwMGQ0ZmY7CiAgLS1lbmRpbmctY29sb3I6ICMwOTA5Nzk7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC13cmFwOiB3cmFwOwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kOwp9CgouYm94IHsKICB3aWR0aDogMTYwcHg7CiAgaGVpZ2h0OiAxNjBweDsKICBtYXJnaW46IDEwcHg7CgogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBjb2xvcjogYWxpY2VibHVlOwogIGZvbnQtc2l6ZTogMjRweDsKfQoKLmJveDpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtaW1hZ2U6IHJhZGlhbC1ncmFkaWVudCgKICAgIGF0IGNlbnRlciwKICAgIHZhcigtLXN0YXJ0aW5nLWNvbG9yKSwKICAgIHZhcigtLWVuZGluZy1jb2xvcikKICApOwp9CgouYm94Om50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1pbWFnZTogcmFkaWFsLWdyYWRpZW50KAogICAgYXQgdG9wIHJpZ2h0LAogICAgdmFyKC0tc3RhcnRpbmctY29sb3IpLAogICAgdmFyKC0tZW5kaW5nLWNvbG9yKQogICk7Cn0KCi5ib3g6bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLWltYWdlOiByYWRpYWwtZ3JhZGllbnQoCiAgICBhdCBib3R0b20gbGVmdCwKICAgIHZhcigtLXN0YXJ0aW5nLWNvbG9yKSwKICAgIHZhcigtLWVuZGluZy1jb2xvcikKICApOwp9

Mikä on tärkein ero staattisen värin ja gradienttivärin välillä CSS:ssä?

Mikä on lineaarisen gradientin ja säteittäisen gradientin ero CSS:ssä?

Hallitse CSS:n perusteet, tyylikieli, joka muuttaa verkkosivujen ulkoasun ja tuntuman. Tutustu keskeisiin käsitteisiin, kuten tekstityyleihin, väreihin, välistyksiin, laatikkomalliin, Flexboxiin ja koristeellisiin tehosteisiin. Kehitä taidot luoda visuaalisesti houkuttelevia ja hyvin jäsenneltyjä verkkosivuja.

Ymmärrä, miten CSS yhdistyy HTML:ään ja miten tyylejä sovelletaan selektoreiden avulla. Käytä värejä, tekstin muotoilua ja hover-efektejä visuaalisen esityksen hallintaan.

Paranna typografiaa käyttämällä riviväliä, välistyksiä, fonttiominaisuuksia ja mukautettuja fontteja. Hallitse fonttiperheitä, painoa, tyyliä ja kokoa paremman luettavuuden saavuttamiseksi.

Hallitse asettelun rakennetta käyttämällä margin-, padding-, border- ja width-ominaisuuksia. Ymmärrä laatikon koon määrittely sekä elementtien näyttötyypit, kuten block, inline ja inline-block.

Hallitse vaakasuoria ja pystysuoria asetteluja Flexbox-ominaisuuksien avulla. Säädä suuntaa, kohdistusta ja välistystä käyttöliittymäkomponenttien rakenteen määrittämiseksi.

Paranna asetteluja taustavärien, kuvien, pseudoelementtien ja varjojen avulla. Tyylittele visuaaliset komponentit syvyyden ja kontrastin luomiseksi.

Taustavärien Käyttö

background-color

Staattinen vs. liukuväri

Hieno lineaarinen liukuväri

Yhtenäinen linear-gradient

radial-gradient

1. Mikä on tärkein ero staattisen värin ja gradienttivärin välillä CSS:ssä?

2. Mikä on lineaarisen gradientin ja säteittäisen gradientin ero CSS:ssä?