CSS Background Color: Practical Patterns and Examples

Use background-color when an element needs a solid fill. The shorthand background can also set a color, but it resets background images and related properties, so the explicit property is safer for small updates.

.card {
  background-color: #f5f5dc;
  color: #1f2937;
}

Browse the beige color page for warm surface alternatives and ready-made shade values.

Transparent backgrounds

RGBA, modern space-separated RGB syntax and eight-digit Hex can all carry alpha:

.overlay {
  background-color: rgb(0 128 128 / 72%);
}

.overlay-hex {
  background-color: #008080b8;
}

Transparency does not produce one fixed visible color. The browser composites it with whatever is behind the element. Use the opacity calculator to compare the result over white, black and your actual page background. If you receive a Hex token from a designer, the Hex to RGB converter will expose its alpha channel.

For common overlay tasks, searchers often need a “black overlay opacity” or “white overlay opacity” value. Start with 8–16% for subtle borders and scrims, 24–40% for image overlays, and always verify the composited text contrast afterward.

Prefer role-based surface tokens

Define --surface-page, --surface-card and --surface-accent instead of naming variables after literal colors. This keeps themes flexible and makes contrast relationships easier to audit.

:root {
  --surface-page: #ffffff;
  --surface-card: #f8fafc;
  --surface-accent: #008080;
}

Always test text, borders and focus rings on the final composited surface. Then continue with link and placeholder colors, where state changes and lower-emphasis text need extra care.