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

El **color de fondo** de un sitio web desempeña un papel crucial en establecer el tono y la atmósfera del sitio. Es uno de los elementos visuales principales que los usuarios verán al visitar tu sitio, y puede influir significativamente en la apariencia y sensación general del sitio web.

## background-color
Podemos establecer el color de fondo de un elemento con esta propiedad. El valor puede estar en cualquier formato: hex, rgb, rgba o palabra reservada.
```css
background-color: value;
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXY+CiAgICAgIFRoZSBzdW4gd2FzIHNldHRpbmcgb3ZlciB0aGUgaG9yaXpvbiwgY2FzdGluZyBhIHdhcm0gZ2xvdyBvdmVyIHRoZSB0cmVlcy4KICAgICAgQmlyZHMgY2hpcnBlZCBoYXBwaWx5IGluIHRoZSBkaXN0YW5jZSwgd2hpbGUgYSBnZW50bGUgYnJlZXplIHJ1c3RsZWQgdGhlCiAgICAgIGxlYXZlcy4gSXQgd2FzIGEgcGVhY2VmdWwgZXZlbmluZywgYW5kIGZvciBhIG1vbWVudCwgZXZlcnl0aGluZyBmZWx0IHJpZ2h0CiAgICAgIGluIHRoZSB3b3JsZC4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

ZGl2IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaW1lZ3JlZW47CiAgY29sb3I6ICMxZTFlMWU7Cn0=

## Color estático vs color degradado
**Color estático** se refiere a un único valor de color que se aplica de manera uniforme a un elemento, como `red` o `#0000FF`. Por otro lado, el **color degradado** implica la combinación de dos o más colores para crear una transición suave entre ellos.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9InN0YXRpYy1jb2xvciI+PC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImdyYWRpZW50LWNvbG9yIj48L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LmNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKfQoKLnN0YXRpYy1jb2xvciB7CiAgd2lkdGg6IDE1MHB4OwogIGhlaWdodDogMTUwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmVkOwp9CgouZ3JhZGllbnQtY29sb3IgewogIHdpZHRoOiAxNTBweDsKICBoZWlnaHQ6IDE1MHB4OwogIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCh0byByaWdodCwgIzNhNjE4NiwgIzg5MjUzZSk7Cn0=

Con el color degradado, es posible crear diseños más atractivos visualmente y dinámicos que con el color estático. A continuación, se presentan diferentes formas de declarar degradados.

## Degradado lineal suave
Para establecer el color de fondo con un degradado lineal, utilizamos:
```css
background-image: linear-gradient("direction", "color1", "color2", ...);
```

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

OnJvb3QgewogIC0tc3RhcnRpbmctY29sb3I6IHJnYigyMDQsIDQzLCA5NCk7CiAgLS1lbmRpbmctY29sb3I6IHJnYigxMTcsIDU4LCAxMzYpOwp9CgouY29udGFpbmVyIHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtd3JhcDogd3JhcDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKfQoKLmJveCB7CiAgbWFyZ2luOiAxMHB4OwogIHdpZHRoOiAyNDBweDsKICBoZWlnaHQ6IDI0MHB4OwogIC8qIHB1dCB0aGUgYm94IHRleHQgaW4gdGhlIGNlbnRlciBvZiB0aGUgYm94ICovCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBjb2xvcjogd2hpdGU7CiAgZm9udC1zaXplOiAyNHB4OwogIGZvbnQtd2VpZ2h0OiA1MDA7Cn0KCi5ib3g6bnRoLWNoaWxkKDEpIHsKICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoCiAgICB0byBib3R0b20sCiAgICB2YXIoLS1zdGFydGluZy1jb2xvciksCiAgICB2YXIoLS1lbmRpbmctY29sb3IpCiAgKTsKfQoKLmJveDpudGgtY2hpbGQoMikgewogIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCgKICAgIHRvIHJpZ2h0LAogICAgdmFyKC0tc3RhcnRpbmctY29sb3IpLAogICAgdmFyKC0tZW5kaW5nLWNvbG9yKQogICk7Cn0KCi5ib3g6bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoCiAgICB0byB0b3AsCiAgICB2YXIoLS1zdGFydGluZy1jb2xvciksCiAgICB2YXIoLS1lbmRpbmctY29sb3IpCiAgKTsKfQoKLmJveDpudGgtY2hpbGQoNCkgewogIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudCgKICAgIHRvIGxlZnQsCiAgICB2YXIoLS1zdGFydGluZy1jb2xvciksCiAgICB2YXIoLS1lbmRpbmctY29sb3IpCiAgKTsKfQ==

También es posible especificar el porcentaje de color en el degradado.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT48L2JvZHk+CjwvaHRtbD4=

Ym9keSB7CiAgYmFja2dyb3VuZC1pbWFnZTogbGluZWFyLWdyYWRpZW50KAogICAgdG8gcmlnaHQsCiAgICAjNzE0OWM2IDEwJSwKICAgICNmYzI5NDcgNDAlLAogICAgI2ZlNjI0NCA2MCUsCiAgICAjZmZkZWI5CiAgKTsKfQ==

## Degradado lineal sólido
Se obtiene un color de fondo a rayas si se especifica el mismo porcentaje para colores adyacentes. Ejecuta el ejemplo para observar la diferencia.

Ym9keSB7CiAgYmFja2dyb3VuZC1pbWFnZTogbGluZWFyLWdyYWRpZW50KAogICAgdG8gcmlnaHQsCiAgICAjNzE0OWM2IDEwJSwKICAgICNmYzI5NDcgMTAlLAogICAgI2ZlNjI0NCAzMCUsCiAgICAjZmZkZWI5IDMwJSwKICAgICMwMDIzNWIgNDAlLAogICAgI2ZmZGQ4MyA0MCUKICApOwp9

## radial-gradient
**El degradado radial** funciona de la misma manera que el lineal. La única diferencia es que el color comienza en el centro y se extiende hacia afuera.

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

OnJvb3QgewogIC0tc3RhcnRpbmctY29sb3I6ICMwMGQ0ZmY7CiAgLS1lbmRpbmctY29sb3I6ICMwOTA5Nzk7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC13cmFwOiB3cmFwOwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kOwp9CgouYm94IHsKICB3aWR0aDogMTYwcHg7CiAgaGVpZ2h0OiAxNjBweDsKICBtYXJnaW46IDEwcHg7CgogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBjb2xvcjogYWxpY2VibHVlOwogIGZvbnQtc2l6ZTogMjRweDsKfQoKLmJveDpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtaW1hZ2U6IHJhZGlhbC1ncmFkaWVudCgKICAgIGF0IGNlbnRlciwKICAgIHZhcigtLXN0YXJ0aW5nLWNvbG9yKSwKICAgIHZhcigtLWVuZGluZy1jb2xvcikKICApOwp9CgouYm94Om50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1pbWFnZTogcmFkaWFsLWdyYWRpZW50KAogICAgYXQgdG9wIHJpZ2h0LAogICAgdmFyKC0tc3RhcnRpbmctY29sb3IpLAogICAgdmFyKC0tZW5kaW5nLWNvbG9yKQogICk7Cn0KCi5ib3g6bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLWltYWdlOiByYWRpYWwtZ3JhZGllbnQoCiAgICBhdCBib3R0b20gbGVmdCwKICAgIHZhcigtLXN0YXJ0aW5nLWNvbG9yKSwKICAgIHZhcigtLWVuZGluZy1jb2xvcikKICApOwp9

¿Cuál es la principal diferencia entre un color estático y un color degradado en CSS?

¿Cuál es la diferencia entre un gradiente lineal y un gradiente radial en CSS?

Estilizar páginas web utilizando CSS. Aplicación de colores, tipografía, espaciado y diseños, y construcción de componentes responsivos usando Flexbox.

Uso de Colores de Fondo

background-color

Color estático vs color degradado

Degradado lineal suave

Degradado lineal sólido

radial-gradient

1. ¿Cuál es la principal diferencia entre un color estático y un color degradado en CSS?

2. ¿Cuál es la diferencia entre un gradiente lineal y un gradiente radial en CSS?