Skip to content

Background

  • Color — a swatch-backed dropdown (bg_color_classes) of utility classes.
  • Image / Video — pick media from the Media library (background_image_bundles / background_video_bundles control which bundles are offered).
  • Overlay — color, opacity, and blend mode over an image or video, so a photo can sit under readable text without a second component. Overlay values are per viewport too — a photo can go clean on mobile and gain a dark overlay at desktop.

Seeded defaults

bg_color_classes and overlay_color_classes ship with these rows out of the box (base/mobile value shown — see Frameworks → Layout class maps for the per-viewport infix pattern):

Identical to Bootstrap 5 — the Custom engine's color table borrows Bootstrap's utility names by convention (see Frameworks → Custom); your theme supplies the CSS.

Label Background color Overlay color
Primary bg-primary bg-primary
Secondary bg-secondary bg-secondary
Light bg-light bg-light
Dark bg-dark bg-dark
Primary subtle bg-primary-subtle —
Secondary subtle bg-secondary-subtle —
Body tertiary bg-body-tertiary —
Primary gradient bg-primary bg-gradient —
Dark gradient bg-dark bg-gradient —
Black — bg-black
White — bg-white
Label Background color Overlay color
Primary bg-blue-600 bg-blue-600
Secondary bg-slate-500 bg-slate-500
Light bg-gray-100 bg-gray-100
Dark bg-gray-900 bg-gray-900
Primary subtle bg-blue-50 —
Secondary subtle bg-slate-100 —
Body tertiary bg-gray-50 —
Primary gradient bg-linear-to-b from-blue-600 to-blue-800 —
Dark gradient bg-linear-to-b from-gray-800 to-gray-950 —
Black — bg-black
White — bg-white

Gradients

Gradients are rows in the background color table rather than a separate control, because that is how the frameworks model them: Bootstrap's bg-gradient only layers a translucent gradient over whatever background color accompanies it, so it ships paired (bg-dark bg-gradient). Tailwind has no single composable class at all — a gradient is a direction plus color stops (bg-linear-to-b from-gray-800 to-gray-950), which is likewise one row. Both spellings are just class strings; the engine concatenates them unchanged.