CSS background-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The background-color property in CSS is one of the most fundamental styling tools used to control the visual appearance of an element’s background. By setting a background color, developers can influence the readability, aesthetics, and overall design cohesion of a webpage. Unlike images or gradients, which can be layered and combined using background-image, background-color provides a solid, uniform layer of color that sits behind all content within the element’s box. It directly affects the element's content area and padding, but does not extend into the margin area, making it an essential part of understanding the box model in CSS.

The choice of background color can significantly impact user experience, accessibility, and visual hierarchy. For instance, contrasting colors between text and background enhance readability, while subtle background tones can help emphasize other page elements without overwhelming the user. background-color works in tandem with other properties like opacity or color to create layered visual effects, allowing for semi-transparent backgrounds or complementary color schemes. Designers often use it strategically to delineate sections, highlight interactive elements, or convey branding through consistent color palettes.

In dynamic web applications, background-color is also frequently manipulated through animations and transitions. For example, when paired with transition or animation, it can smoothly shift colors in response to user interactions such as hover states or clicks, providing a responsive and engaging user experience. Its simplicity and versatility make it an essential tool for both static layouts and interactive designs, offering a straightforward way to dramatically change the look and feel of a webpage without introducing additional visual assets.

Definition

Initial value: transparent
Applies to: All elements
Inherited: No
Computed value: The computed color
Animatable: Yes
JavaScript syntax: object.style.backgroundColor

Interactive Demo

background-color: skyblue;

background-color: #5EA165;

background-color: rgb(46, 158, 203);

background-color: rgb(46, 158, 203, .5);

background-color: hsl(54, 63%, 49%);

Syntax

background-color: <color>

Values

<color>Accepts a single color as its value, which can be a keyword, hex, RGB, RGBa, HSL or HSLa color value.
transparentThe default value; you will be able to see the elements behind the element in question showing through it.
inherit

Example

HTML

<div class="example">

  <h1>CSS background-color examples</h1>



  <div class="box default">Default background (light gray)</div>



  <div class="box named">Named color: lightblue</div>



  <div class="box hex">Hex color: #ffcc00</div>



  <div class="box rgba">RGBA color: rgba(255, 0, 0, 0.12)</div>



  <button class="btn">Solid background button</button>

</div>

CSS

/* Container */
.example {
  max-width: 720px;
  margin: 40px auto;
  padding: 20px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #111;
}

/* Box base styles */
.box {
  padding: 12px 16px;
  border-radius: 6px;
  margin: 12px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Examples of background-color using different value types */
.box.default {
  background-color: #f5f5f5; /* hex value */
}

.box.named {
  background-color: lightblue; /* named color */
}

.box.hex {
  background-color: #ffcc00; /* hex value */
}

.box.rgba {
  background-color: rgba(255, 0, 0, 0.12); /* rgba value with alpha */
}

/* Button with a solid background color */
.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  background-color: hsl(200, 90%, 50%); /* HSL value */
  color: #fff;
  cursor: pointer;
}

.btn:active {
  transform: translateY(1px);
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS background-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.