Backgrounds

Background color utilities from semantic role tokens, shade/tint overlay ramps, and transparency helpers.

bg-* utilities set background-color using semantic role tokens that resolve through light-dark().

Surfaces and roles

Class	Token
`bg-background` / `bg-foreground`	`--background` / `--foreground`
`bg-card` / `bg-card-foreground`	`--card` / `--card-foreground`
`bg-input` / `bg-input-foreground`	`--input` / `--input-foreground`
`bg-border` / `bg-border-foreground`	`--border` / `--border-foreground`
`bg-muted` / `bg-muted-foreground`	`--muted` / `--muted-foreground`
`bg-faded` / `bg-faded-foreground`	`--faded` / `--faded-foreground`

Brand and status

Brand	Status
`bg-primary` / `bg-primary-foreground`	`bg-info` / `bg-info-foreground`
`bg-secondary` / `bg-secondary-foreground`	`bg-success` / `bg-success-foreground`
`bg-tertiary` / `bg-tertiary-foreground`	`bg-warning` / `bg-warning-foreground`
	`bg-destructive` / `bg-destructive-foreground`

Absolute & empty

Class	Result
`bg-white`	`--white` (static across light/dark)
`bg-black`	`--black` (static across light/dark)
`bg-transparent`	`background-color: transparent`
`bg-none`	`background: none` (clears image + color)

Overlay ramps

Alpha-based overlays for modal backdrops, scrims, and frosted effects:

Scale	Classes	Derived from	Typical use
Shade (darken)	`bg-shade-none`, `bg-shade-50` to `bg-shade-950`, `bg-shade-full`	`--shade-*` (from `neutral-950`)	Scrims, modal backdrops
Tint (lighten)	`bg-tint-none`, `bg-tint-50` to `bg-tint-950`, `bg-tint-full`	`--tint-*` (from white)	Highlights over media

<div class="grid grid-area-pile">
  <img src="/image.jpg" alt="" class="size-full object-cover" />
  <div class="bg-shade-700"></div>
  <h2 class="text-white self-end p-md">Text overlay</h2>
</div>

Variants

Hover: All roles have hover:bg-* counterparts. See Hover states.
Opacity: Dim background channels using bg-opacity-*. See Color opacity.