background-color

Definition

The background-color property sets the background color of an element.

Syntax

.badge {
  background-color: #0ea5e9;
  color: white;
}

Values

<color> keywords (red, rebeccapurple), hex, RGB(A), HSL(A), or CSS color level 4 functions.
transparent: renders the element with no fill.
currentColor: reuse the element’s computed color.
inherit / initial / unset: participate in the cascade explicitly.

Practical Examples

.card {
  background-color: rgb(14, 165, 233);
}

.card--muted {
  background-color: color-mix(in srgb, #0ea5e9 25%, white 75%);
}

Use CSS color functions to generate cohesive palette variants for theming.

HTML

bg-sky-500

bg-sky-100

custom mix

Code

<div class="grid gap-4 sm:grid-cols-3">
  <div class="rounded-lg border border-slate-200 bg-sky-500 p-4 text-center text-sm font-semibold text-white shadow-sm">bg-sky-500</div>
  <div class="rounded-lg border border-slate-200 bg-sky-100 p-4 text-center text-sm font-semibold text-slate-700 shadow-sm">bg-sky-100</div>
  <div class="rounded-lg border border-slate-200 p-4 text-center text-sm font-semibold text-slate-700 shadow-sm" style="background-color: color-mix(in srgb, #0ea5e9 20%, white 80%);">custom mix</div>
</div>

Tips & Best Practices

Declare background-color alongside background-image to avoid flashes of unstyled content.
Lean on CSS variables for palettes so themes can adjust in one place.
Combine with color-mix() or rgba() to create translucent overlays.

Accessibility & UX Notes

Always verify text contrast ratios when changing background colors—aim for WCAG AA (4.5:1 for normal text).

Browser Support

Supported everywhere, including legacy browsers. Color level 4 functions like color-mix() require modern engines.

color for foreground text styling.
background shorthand to layer colors with images.
mix-blend-mode for advanced overlay effects.