Background Color

The background color of a website plays a crucial role in setting the tone and atmosphere of the site. It's one of the primary visual elements that users will see when they visit your site, and it can greatly impact the overall look and feel of the website.

background-color property

We can set background color for an element with help of this porperty. The value can be in any format: hex, rgb, rgba or reserved word.

static vs gradient color

Static color refers to a single color value that is applied uniformly to an element, such as red or #0000FF . On the other hand, gradient color involves blending two or more colors together to create a smooth transition between them.

With gradient color, we can create more visually attractive and dynamic designs than with static color. Let's consider different ways to declare gradients.

linear gradient

To set the linear gradient background color we use:

Also, we can specify the color percentage in the gradient color.

solid linear gradient

We get striped background color if we specify the same percentage for adjacent colors. Let's run the example to get what the difference is.

radial gradient

Radial gradient works the same way as linear. The only difference is that color starts at the center and spreads outwards.