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

La **couleur d’arrière-plan** d’un site web joue un rôle essentiel dans la définition du ton et de l’atmosphère du site. Il s’agit de l’un des principaux éléments visuels que les utilisateurs remarqueront lors de leur visite, et elle peut fortement influencer l’apparence générale du site web.

## background-color
Nous pouvons définir la couleur d’arrière-plan d’un élément à l’aide de cette propriété. La valeur peut être dans n’importe quel format : hexadécimal, rgb, rgba ou mot réservé.
```css
background-color: value;
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXY+CiAgICAgIFRoZSBzdW4gd2FzIHNldHRpbmcgb3ZlciB0aGUgaG9yaXpvbiwgY2FzdGluZyBhIHdhcm0gZ2xvdyBvdmVyIHRoZSB0cmVlcy4KICAgICAgQmlyZHMgY2hpcnBlZCBoYXBwaWx5IGluIHRoZSBkaXN0YW5jZSwgd2hpbGUgYSBnZW50bGUgYnJlZXplIHJ1c3RsZWQgdGhlCiAgICAgIGxlYXZlcy4gSXQgd2FzIGEgcGVhY2VmdWwgZXZlbmluZywgYW5kIGZvciBhIG1vbWVudCwgZXZlcnl0aGluZyBmZWx0IHJpZ2h0CiAgICAgIGluIHRoZSB3b3JsZC4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

ZGl2IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaW1lZ3JlZW47CiAgY29sb3I6ICMxZTFlMWU7Cn0=

## Couleur statique vs couleur dégradée
**Couleur statique** désigne une valeur de couleur unique appliquée uniformément à un élément, comme `red` ou `#0000FF`. À l'inverse, une **couleur dégradée** consiste à mélanger deux couleurs ou plus afin de créer une transition progressive entre elles.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9InN0YXRpYy1jb2xvciI+PC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImdyYWRpZW50LWNvbG9yIj48L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LmNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKfQoKLnN0YXRpYy1jb2xvciB7CiAgd2lkdGg6IDE1MHB4OwogIGhlaWdodDogMTUwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmVkOwp9CgouZ3JhZGllbnQtY29sb3IgewogIHdpZHRoOiAxNTBweDsKICBoZWlnaHQ6IDE1MHB4OwogIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCh0byByaWdodCwgIzNhNjE4NiwgIzg5MjUzZSk7Cn0=

Avec une couleur dégradée, il est possible de concevoir des mises en page plus attrayantes et dynamiques qu'avec une couleur statique. Examinons différentes méthodes pour déclarer des dégradés.

## Dégradé linéaire fluide
Pour définir la couleur d’arrière-plan en dégradé linéaire, on utilise :
```css
background-image: linear-gradient("direction", "color1", "color2", ...);
```

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

OnJvb3QgewogIC0tc3RhcnRpbmctY29sb3I6IHJnYigyMDQsIDQzLCA5NCk7CiAgLS1lbmRpbmctY29sb3I6IHJnYigxMTcsIDU4LCAxMzYpOwp9CgouY29udGFpbmVyIHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtd3JhcDogd3JhcDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKfQoKLmJveCB7CiAgbWFyZ2luOiAxMHB4OwogIHdpZHRoOiAyNDBweDsKICBoZWlnaHQ6IDI0MHB4OwogIC8qIHB1dCB0aGUgYm94IHRleHQgaW4gdGhlIGNlbnRlciBvZiB0aGUgYm94ICovCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBjb2xvcjogd2hpdGU7CiAgZm9udC1zaXplOiAyNHB4OwogIGZvbnQtd2VpZ2h0OiA1MDA7Cn0KCi5ib3g6bnRoLWNoaWxkKDEpIHsKICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoCiAgICB0byBib3R0b20sCiAgICB2YXIoLS1zdGFydGluZy1jb2xvciksCiAgICB2YXIoLS1lbmRpbmctY29sb3IpCiAgKTsKfQoKLmJveDpudGgtY2hpbGQoMikgewogIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCgKICAgIHRvIHJpZ2h0LAogICAgdmFyKC0tc3RhcnRpbmctY29sb3IpLAogICAgdmFyKC0tZW5kaW5nLWNvbG9yKQogICk7Cn0KCi5ib3g6bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoCiAgICB0byB0b3AsCiAgICB2YXIoLS1zdGFydGluZy1jb2xvciksCiAgICB2YXIoLS1lbmRpbmctY29sb3IpCiAgKTsKfQoKLmJveDpudGgtY2hpbGQoNCkgewogIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCgKICAgIHRvIGxlZnQsCiAgICB2YXIoLS1zdGFydGluZy1jb2xvciksCiAgICB2YXIoLS1lbmRpbmctY29sb3IpCiAgKTsKfQ==

Il est également possible de spécifier le pourcentage de couleur dans le dégradé.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT48L2JvZHk+CjwvaHRtbD4=

Ym9keSB7CiAgYmFja2dyb3VuZC1pbWFnZTogbGluZWFyLWdyYWRpZW50KAogICAgdG8gcmlnaHQsCiAgICAjNzE0OWM2IDEwJSwKICAgICNmYzI5NDcgNDAlLAogICAgI2ZlNjI0NCA2MCUsCiAgICAjZmZkZWI5CiAgKTsKfQ==

## Dégradé linéaire uni
Un arrière-plan rayé est obtenu si le même pourcentage est spécifié pour des couleurs adjacentes. Exécuter l'exemple pour observer la différence.

Ym9keSB7CiAgYmFja2dyb3VuZC1pbWFnZTogbGluZWFyLWdyYWRpZW50KAogICAgdG8gcmlnaHQsCiAgICAjNzE0OWM2IDEwJSwKICAgICNmYzI5NDcgMTAlLAogICAgI2ZlNjI0NCAzMCUsCiAgICAjZmZkZWI5IDMwJSwKICAgICMwMDIzNWIgNDAlLAogICAgI2ZmZGQ4MyA0MCUKICApOwp9

## radial-gradient
**Le dégradé radial** fonctionne de la même manière que le linéaire. La seule différence est que la couleur commence au centre et s'étend vers l'extérieur.

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

OnJvb3QgewogIC0tc3RhcnRpbmctY29sb3I6ICMwMGQ0ZmY7CiAgLS1lbmRpbmctY29sb3I6ICMwOTA5Nzk7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC13cmFwOiB3cmFwOwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kOwp9CgouYm94IHsKICB3aWR0aDogMTYwcHg7CiAgaGVpZ2h0OiAxNjBweDsKICBtYXJnaW46IDEwcHg7CgogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBjb2xvcjogYWxpY2VibHVlOwogIGZvbnQtc2l6ZTogMjRweDsKfQoKLmJveDpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtaW1hZ2U6IHJhZGlhbC1ncmFkaWVudCgKICAgIGF0IGNlbnRlciwKICAgIHZhcigtLXN0YXJ0aW5nLWNvbG9yKSwKICAgIHZhcigtLWVuZGluZy1jb2xvcikKICApOwp9CgouYm94Om50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1pbWFnZTogcmFkaWFsLWdyYWRpZW50KAogICAgYXQgdG9wIHJpZ2h0LAogICAgdmFyKC0tc3RhcnRpbmctY29sb3IpLAogICAgdmFyKC0tZW5kaW5nLWNvbG9yKQogICk7Cn0KCi5ib3g6bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLWltYWdlOiByYWRpYWwtZ3JhZGllbnQoCiAgICBhdCBib3R0b20gbGVmdCwKICAgIHZhcigtLXN0YXJ0aW5nLWNvbG9yKSwKICAgIHZhcigtLWVuZGluZy1jb2xvcikKICApOwp9

Quelle est la principale différence entre une couleur statique et une couleur en dégradé en CSS ?

Quelle est la différence entre un dégradé linéaire et un dégradé radial en CSS ?

Styliser des pages web avec CSS. Appliquer les couleurs, la typographie, les espacements et les mises en page, et créer des composants responsives avec Flexbox.

Utilisation des Couleurs d'Arrière-Plan

background-color

Couleur statique vs couleur dégradée

Dégradé linéaire fluide

Dégradé linéaire uni

radial-gradient

1. Quelle est la principale différence entre une couleur statique et une couleur en dégradé en CSS ?

2. Quelle est la différence entre un dégradé linéaire et un dégradé radial en CSS ?