CSS Function
background-color
The background-color property sets the background color of an element. It is painted behind any background images.
Syntax
background-color: <color>Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| color | color | Yes | Any valid CSS color value |
| transparent | keyword | No | Fully transparent background (default) |
Examples
Solid background
Light gray background (gray-50).
css
body {
background-color: #f9fafb;
}Semi-transparent overlay
50% transparent black overlay.
css
.overlay {
background-color: rgb(0 0 0 / 0.5);
}Tailwind utility
Tailwind provides bg-{color} utilities with dark mode.
html
<div class="bg-white dark:bg-gray-900">Content</div>Browser Support
✓
Chrome
v1++
✓
Firefox
v1++
✓
Safari
v1++
✓
Edge
v12++
✓
Opera
v3.5++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
bg-{color}: bg-white, bg-blue-500, bg-gray-900/50, etc.Frequently Asked Questions
What is the default background-color?▼
The default is transparent. The white background you see on most pages comes from the browser's UA stylesheet on the html or body element.
Can I transition background-color?▼
Yes. It is animatable. Use transition: background-color 150ms ease for smooth color changes.
Explore CSS Color Tools
Try our free tools to work with background-color and other CSS color functions.
Open Tools