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

El **color de fondo** de un sitio web desempeña un papel crucial en la definición del tono y la atmósfera del sitio. Es uno de los principales elementos visuales 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 utilizando 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 mezclar 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 y dinámicos visualmente que con el color estático. Consideremos 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. Ejecute 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 degradado lineal y un degradado radial en CSS?

Domina los conceptos esenciales de CSS, el lenguaje de estilos que transforma la apariencia y sensación de las páginas web. Explora conceptos clave como estilos de texto, colores, espaciado, el modelo de caja, Flexbox y efectos decorativos. Desarrolla las habilidades necesarias para crear páginas web visualmente atractivas y bien estructuradas.

Comprender cómo CSS se conecta con HTML y cómo se aplican los estilos mediante selectores.
Aplicación de colores, estilos de texto y efectos hover para controlar la presentación visual.

Mejora de la tipografía utilizando altura de línea, espaciado, propiedades de fuente y fuentes personalizadas. Control de familias tipográficas, grosor, estilo y tamaño de fuente para una mejor legibilidad.

Control de la estructura del diseño utilizando las propiedades de margen, relleno, bordes y ancho. Comprensión del comportamiento de dimensionamiento de cajas y de los tipos de visualización de elementos como block, inline e inline-block.

Control de diseños horizontales y verticales utilizando propiedades de Flexbox. Ajuste de dirección, alineación y espaciado para estructurar componentes de la interfaz de usuario.

Mejora de diseños utilizando colores de fondo, imágenes, pseudoelementos y sombras. Estilización de componentes visuales para profundidad y contraste.

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 degradado lineal y un degradado radial en CSS?