CSS background-color: Values, Default & Examples

Syntax and Values

The background-color property accepts any valid CSS color value:

/* Syntax */
background-color: <color>; /* any color, including transparent and currentColor */
background-color: inherit | initial | revert | unset;

/* Examples */
background-color: black;
background-color: #000000;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
background-color: hsl(0, 0%, 0%);
background-color: transparent;

Property Values

Value	Description	Example
color	Any valid CSS color	`background-color: black;`
transparent	Fully transparent background	`background-color: transparent;`
inherit	Inherits from parent element	`background-color: inherit;`
initial	Sets to default value (transparent)	`background-color: initial;`

Initial Value and How It Paints

Initial value: transparent. The property is not inherited.
Why pages look white by default: when neither html nor body sets a background, the browser paints the canvas with its default color, which is white in a normal light color scheme. Setting background-color on html or body replaces it.
Layering: background-color is always painted beneath every background-image layer on the same element, so it shows through transparent parts of images and gradients and acts as a fallback while images load or if they fail.
Painting area: by default the color fills the border box (under the border); change that with background-clip.

.hero {
    /* the color sits under the image and shows until it loads */
    background-color: #000;
    background-image: url('hero.webp');
}

/* In the shorthand the color is written once, in the final layer */
.hero {
    background: url('hero.webp') center / cover no-repeat #000;
}

Color Format Options

CSS provides multiple ways to specify colors. Here are all the formats you can use for black backgrounds:

Keyword Colors

background-color: black;
background-color: white;
background-color: gray;
background-color: darkgray;

Hexadecimal

background-color: #000000;
background-color: #000;
background-color: #111111;
background-color: #333333;

RGB/RGBA

background-color: rgb(0, 0, 0);
background-color: rgb(17, 17, 17);
background-color: rgba(0, 0, 0, 0.9);
background-color: rgba(0, 0, 0, 0.5);

HSL/HSLA

background-color: hsl(0, 0%, 0%);
background-color: hsl(0, 0%, 10%);
background-color: hsla(0, 0%, 0%, 0.9);
background-color: hsla(0, 0%, 0%, 0.5);

4- and 8-Digit Hex (with Alpha)

background-color: #000c;      /* #RGBA: black, 80% opaque */
background-color: #000000cc;  /* #RRGGBBAA: same color */
background-color: #00000080;  /* black, ~50% opaque */

Modern Space-Separated Syntax

background-color: rgb(0 0 0);
background-color: rgb(0 0 0 / 0.9);
background-color: hsl(0 0% 0%);
background-color: hsl(0 0% 10% / 50%);

Current browsers accept commas or spaces; the slash adds alpha, so rgba()/hsla() are optional aliases.

currentColor and transparent

.swatch {
    color: #111;
    background-color: currentColor; /* uses the element's color */
}
.overlay {
    background-color: transparent;  /* the initial value */
}

Creating Perfect Black Backgrounds

Black backgrounds are popular in modern web design for their elegance and ability to make content stand out. Here are the best practices:

If the page should follow the user's operating system theme rather than be dark for everyone, the same color values can be wrapped in a prefers-color-scheme media query — see dark mode backgrounds with prefers-color-scheme for the full pattern.

Pure Black vs. Soft Black

Pure Black (#000000)

background-color: #000000;
/* Maximum contrast */
/* Best for OLED displays */
/* Can be harsh on eyes */

Soft Black (#0a0a0a)

background-color: #0a0a0a;
/* Softer on the eyes */
/* Better for reading */
/* Still maintains contrast */

Black Background Best Practices

Use #000 for maximum contrast and OLED optimization
Consider #0a0a0a or #111 for better readability
Always ensure sufficient contrast with text (WCAG AA compliance)
Test on different displays (LCD, OLED, high-contrast modes)
Consider using CSS variables for theme switching

Working with Transparency

The background-color property supports transparency through RGBA and HSLA values:

RGBA Transparency

rgba(0, 0, 0, 1)

100% Opaque

rgba(0, 0, 0, 0.75)

75% Opaque

rgba(0, 0, 0, 0.5)

50% Opaque

rgba(0, 0, 0, 0.25)

25% Opaque

Practical Use Cases

/* Overlay for images */
.image-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    inset: 0;
}

/* Semi-transparent cards */
.glass-card {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

/* Hover states */
.button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

Inheritance and Cascading

The background-color property does NOT inherit by default, but you can control its behavior:

/* Default behavior - not inherited */
.parent {
    background-color: black;
}
.child {
    /* Background will be transparent, not black */
}

/* Force inheritance */
.child {
    background-color: inherit;
}

/* Reset to initial value */
.element {
    background-color: initial; /* transparent */
}

/* unset: for a non-inherited property like this one,
   it behaves like initial (transparent) */
.element {
    background-color: unset;
}

Performance Considerations

Background colors are highly performant, but keep these tips in mind:

✅ Best Practices

Solid colors are the fastest to render
Use CSS variables for theme switching
Avoid unnecessary transparency when not needed
Animating background-color repaints every frame; for large areas, fade an overlay's opacity instead

⚡ Performance Comparison

`background-color: #000;`	Fastest
`background-color: rgba(0,0,0,0.9);`	Fast (minimal overhead)
`background: linear-gradient(...);`	More paint work (a gradient is a background-image)

Practical Examples

Dark Mode Implementation

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --text-primary: #000000;
}

[data-theme="dark"] {
    --bg-primary: #000000;
    --bg-secondary: #111111;
    --text-primary: #ffffff;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease;
}

Gradient Fallbacks

/* Always provide a solid color fallback */
.element {
    background-color: #000; /* Fallback */
    background: linear-gradient(135deg, #000 0%, #333 100%);
}

Accessibility Patterns

/* High contrast mode support */
@media (prefers-contrast: high) {
    body {
        background-color: #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

Browser Support

The background-color property has excellent browser support:

Feature	Chrome	Firefox	Safari	Edge
Basic support	✅ 1.0+	✅ 1.0+	✅ 1.0+	✅ 12+
RGBA values	✅ 1.0+	✅ 3.0+	✅ 3.1+	✅ 12+
CSS Variables	✅ 49+	✅ 31+	✅ 9.1+	✅ 15+