CSS background-color

The background-color property sets the color painted behind an element's content and padding. It is one of the simplest CSS properties, but it affects readability, contrast and the visual structure of a page.

Syntax

background-color: transparent;
background-color: #2563eb;
background-color: rgb(37, 99, 235);
background-color: hsl(221 83% 53%);

Example

<section class="notice">
  Save changes before leaving the page.
</section>

.notice {
  padding: 1rem;
  color: #102a43;
  background-color: #dbeafe;
  border: 1px solid #93c5fd;
}

Result:

Save changes before leaving the page.

When to use it

Use background-color for cards, warnings, page sections, buttons, table cells and visual grouping. If you need a blend between multiple colors, use a gradient instead.

Practical notes

The initial value is transparent, so the parent background can show through. Semi-transparent colors such as rgb(37 99 235 / 0.15) are useful for subtle panels, but they also mix with whatever is behind the element.

For interface work, define colors in variables when the same background appears in several places. Future you will prefer changing one token over hunting fifteen almost-identical blues.

Common mistake