The background-color property is one of the most common CSS properties. It sets the solid color behind an element’s content using named colors, hex, rgb, hsl, and more.
Fill element areas.
One simple property.
Named, hex, rgb, hsl.
Default see-through value.
Semi-transparent panels.
Reusable theme colors.
The background-color CSS property sets the background color of an element. It paints a solid color behind the content area, which helps you separate sections, highlight cards, and improve readability.
Unlike background-image, which can use photos or gradients, background-color applies one flat color. It is often combined with padding, borders, and other background properties.
Start with a named color like lightblue or a hex value like #2563eb. Once that works, try rgba() when you need transparency.
Apply background-color to any element that should have a colored background:
selector {
background-color: color;
}div {
background-color: lightblue;
padding: 20px;
border: 1px solid #000;
}transparent.background-color for solid fills and background-image for photos or gradients.| Question | Answer |
|---|---|
| Initial value | transparent |
| Applies to | All elements |
| Inherited | No |
| Animatable | Yes |
| Common use | Cards, sections, alerts, buttons, panels |
The initial value of background-color is transparent. That means the element does not paint its own background color, so the parent element’s background can show through.
background-color accepts standard CSS color values. These are the most common ones for beginners.
| Value | Example | Meaning |
|---|---|---|
| Named color | background-color: lightblue; | Uses a CSS color keyword |
| Hex color | background-color: #2563eb; | Uses a hexadecimal color |
| RGB or RGBA | background-color: rgba(37, 99, 235, 0.8); | Uses red, green, blue, and optional alpha |
| HSL or HSLA | background-color: hsl(142 72% 29%); | Uses hue, saturation, and lightness |
| CSS variable | background-color: var(--surface); | Uses a reusable theme color |
transparent | background-color: transparent; | No background color is painted |
namedEasy to read and great for quick demos and learning.
Example: lightblue
hexVery common in design systems and brand color palettes.
Example: #7c3aed
rgb()Useful when you want numeric control over red, green, and blue.
Example: rgb(5, 150, 105)
hsl()Helpful when adjusting lightness or saturation is easier than hex.
Example: hsl(24 95% 53%)
rgba()Lets the background show through with partial transparency.
Example: rgba(219, 39, 119, 0.65)
transparentThe default value. No background color is painted.
Parent backgrounds can show through.
background-color vs color| Property | Styles | Best for |
|---|---|---|
background-color | The area behind the element’s content | Panels, sections, cards, page blocks |
color | Text and other foreground content | Headings, paragraphs, links, button labels |
These swatches use different color formats with the same property:
All four boxes use background-color with different valid color values.
Try background-color with named colors, hex values, rgba transparency, and CSS theme variables.
Start with simple solid colors before moving to transparency and theme variables.
Set a quick background color using a CSS color keyword.
<style>
div {
background-color: lightblue;
padding: 20px;
border: 1px solid #000;
}
</style>
<div>This is a div with a light blue background.</div>The browser paints a solid light blue fill behind the div’s content area.
Use a hex value when you need an exact brand or design-system color.
.card {
background-color: #2563eb;
color: #eff6ff;
padding: 1.25rem;
border-radius: 0.75rem;
}Hex colors are precise and widely used in real projects. Pair them with a readable text color using the color property.
Use alpha colors for overlays and CSS variables to keep theme colors consistent.
Create a panel that lets the background behind it show through.
.overlay {
background-color: rgba(15, 23, 42, 0.55);
color: #fff;
padding: 1.25rem;
border-radius: 0.85rem;
}The alpha value 0.55 makes the dark background 55% opaque, so the gradient behind it remains visible.
Store reusable colors once and apply them with background-color: var(...).
:root {
--surface: #ecfdf5;
--accent: #059669;
}
.panel {
background-color: var(--surface);
}
.badge {
background-color: var(--accent);
}Changing the custom properties updates every element that references them, which makes theme updates much easier.
background-color WorksWrite a named color, hex value, rgb(), hsl(), or CSS variable in your stylesheet.
The color fills the element’s background painting area behind its content.
Properties like background-clip, padding, and borders affect how much of that color you see.
Solid background colors help organize content and improve readability.
background-color is one of the most widely supported CSS properties and works reliably across modern and older browsers.
Chrome, Firefox, Safari, Edge, Opera, and legacy browsers all support standard color values.
Invalid color values are ignored by the browser, leaving the previous or default background in place.
Bottom line: Use background-color confidently in any web project.
The background-color property is a foundational CSS tool for styling the web. It lets you add solid colors to sections, cards, buttons, and panels using simple, readable syntax.
Start with named colors and hex values, then explore rgba() for overlays and CSS variables for reusable theme colors.
background-color with colorbackground-imagebackground-colorUse these points when styling backgrounds in your next layout.
Colors the area behind content.
PurposeNamed, hex, rgb, hsl.
ValuesNo color unless you set one.
DefaultBackground vs text color.
CompareReuse with var().
ProjectsOpen the HTML editor, apply background-color, and preview solid and transparent backgrounds instantly.
5 people found this page helpful