background-color
background-color sets the fill color behind an element’s content and padding. It is a basic tool for surface grouping, emphasis, and readable contrast.
Overview
background-color sets the fill color behind an element’s content and padding. It is a basic tool for surface grouping, emphasis, and readable contrast.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.card {
background-color: #ffffff;
}
.highlight {
background-color: rgba(255, 235, 59, 0.3);
}Live demo
Use cases
Surface grouping
Differentiate cards, alerts, and containers from the page background.
Status emphasis
Support positive, warning, or error styling with meaningful background treatments.
Cautions
- Background color alone should not be the only signal of status or meaning.
- Theme changes can expose weak color combinations if contrast is not tested systematically.
Accessibility
- Always verify text and icon contrast against the chosen background color.
Related links
Powered by web-features