background-color
The background-color property fills an element's background and content/padding box with a solid color.
Syntax
background-color: <color>;
Examples
.card { background-color: oklch(0.97 0.01 250); }
.cta { background-color: rgb(37 99 235); }
Output
Renders a card with a near-white tinted background and a CTA with a solid blue fill.
Notes
Painted behind background-image. Use color-mix() or relative colors to derive hover/active variants. Ensure adequate contrast with the foreground color for accessibility.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |