Summary  
This chapter explains how to set element background colors in CSS, including specifying solid colors using named, hex, RGB, and RGBA formats. It also covers creating and customizing linear and radial gradients by controlling directions, color stops, and layering.  

General domain of usage  
Web design

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

Verkkosivuston **taustaväri** on keskeisessä roolissa sivuston tunnelman ja ilmapiirin luomisessa. Se on yksi tärkeimmistä visuaalisista elementeistä, jonka käyttäjät näkevät vieraillessaan sivustollasi, ja sillä voi olla merkittävä vaikutus koko sivuston ulkoasuun ja tuntumaan.

## background-color
Tämän ominaisuuden avulla voidaan asettaa elementille 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 niiden välille syntyy pehmeä siirtymä.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9InN0YXRpYy1jb2xvciI+PC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImdyYWRpZW50LWNvbG9yIj48L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LmNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKfQoKLnN0YXRpYy1jb2xvciB7CiAgd2lkdGg6IDE1MHB4OwogIGhlaWdodDogMTUwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmVkOwp9CgouZ3JhZGllbnQtY29sb3IgewogIHdpZHRoOiAxNTBweDsKICBoZWlnaHQ6IDE1MHB4OwogIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCh0byByaWdodCwgIzNhNjE4NiwgIzg5MjUzZSk7Cn0=

Liukuvärien avulla voidaan luoda visuaalisesti houkuttelevampia ja dynaamisempia suunnitelmia kuin staattisilla väreillä. Tarkastellaan erilaisia tapoja määrittää liukuvärejä.

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

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

OnJvb3QgewogIC0tc3RhcnRpbmctY29sb3I6IHJnYigyMDQsIDQzLCA5NCk7CiAgLS1lbmRpbmctY29sb3I6IHJnYigxMTcsIDU4LCAxMzYpOwp9CgouY29udGFpbmVyIHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtd3JhcDogd3JhcDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKfQoKLmJveCB7CiAgbWFyZ2luOiAxMHB4OwogIHdpZHRoOiAyNDBweDsKICBoZWlnaHQ6IDI0MHB4OwogIC8qIHB1dCB0aGUgYm94IHRleHQgaW4gdGhlIGNlbnRlciBvZiB0aGUgYm94ICovCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBjb2xvcjogd2hpdGU7CiAgZm9udC1zaXplOiAyNHB4OwogIGZvbnQtd2VpZ2h0OiA1MDA7Cn0KCi5ib3g6bnRoLWNoaWxkKDEpIHsKICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoCiAgICB0byBib3R0b20sCiAgICB2YXIoLS1zdGFydGluZy1jb2xvciksCiAgICB2YXIoLS1lbmRpbmctY29sb3IpCiAgKTsKfQoKLmJveDpudGgtY2hpbGQoMikgewogIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCgKICAgIHRvIHJpZ2h0LAogICAgdmFyKC0tc3RhcnRpbmctY29sb3IpLAogICAgdmFyKC0tZW5kaW5nLWNvbG9yKQogICk7Cn0KCi5ib3g6bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoCiAgICB0byB0b3AsCiAgICB2YXIoLS1zdGFydGluZy1jb2xvciksCiAgICB2YXIoLS1lbmRpbmctY29sb3IpCiAgKTsKfQoKLmJveDpudGgtY2hpbGQoNCkgewogIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCgKICAgIHRvIGxlZnQsCiAgICB2YXIoLS1zdGFydGluZy1jb2xvciksCiAgICB2YXIoLS1lbmRpbmctY29sb3IpCiAgKTsKfQ==

Lisäksi gradientin väreille voidaan määrittää värin prosenttiosuus.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT48L2JvZHk+CjwvaHRtbD4=

Ym9keSB7CiAgYmFja2dyb3VuZC1pbWFnZTogbGluZWFyLWdyYWRpZW50KAogICAgdG8gcmlnaHQsCiAgICAjNzE0OWM2IDEwJSwKICAgICNmYzI5NDcgNDAlLAogICAgI2ZlNjI0NCA2MCUsCiAgICAjZmZkZWI5CiAgKTsKfQ==

## Yhtenäinen linear-gradient
Raidallinen taustaväri saadaan, kun vierekkäisille väreille määritetään sama prosenttiosuus. Tarkastellaan esimerkkiä, jotta nähdään, 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ä?

Muotoile verkkosivuja CSS:n avulla. Käytä värejä, typografiaa, välistyksiä ja asetteluja sekä rakenna responsiivisia komponentteja Flexboxilla.

Taustavärien Käyttäminen

background-color

Staattinen vs. liukuväri

Hieno lineaarinen gradientti

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ä?