Background

Convey meaning through background-color and add decoration with gradients.

Accessibility tip: Color alone shouldn't convey meaning as it's not perceived by assistive technology users. Ensure clarity through text with adequate contrast, ARIA attributes where needed, and consider using .visually-hidden for screen reader content.

Background Color

Similar to the foreground classes, set the background of an element to any contextual class. Background utilities do not set color property, so in some cases you'll want to use in combination with .fg-* color utilities.

Body Backgrounds

.bg-main

.bg-even

.bg-evident

.bg-inverse

.base-color

.bg-highlight

html

<p class="bg-main p-2xsmall">.bg-main</p>
<p class="bg-even p-2xsmall">.bg-even</p>
<p class="bg-evident p-2xsmall">.bg-evident</p>
<p class="bg-inverse fg-inverse p-2xsmall">.bg-inverse</p>
<p class="base-color contrast-color p-2xsmall">.base-color</p>
<p class="bg-highlight p-2xsmall">.bg-highlight</p>

Color Backgrounds

Base context colors can be used as background with .bg-* classes.

.bg-default

.bg-alternate

.bg-primary

.bg-secondary

.bg-neutral

.bg-danger

.bg-success

.bg-warning

.bg-info

.bg-black

.bg-white

html

<p class="bg-default fg-contrast p-2xsmall">.bg-default</p>
<p class="bg-alternate fg-contrast p-2xsmall">.bg-alternate</p>
<p class="bg-primary fg-contrast p-2xsmall">.bg-primary</p>
<p class="bg-secondary fg-contrast p-2xsmall">.bg-secondary</p>
<p class="bg-neutral fg-contrast p-2xsmall">.bg-neutral</p>
<p class="bg-danger fg-contrast p-2xsmall">.bg-danger</p>
<p class="bg-success fg-contrast p-2xsmall">.bg-success</p>
<p class="bg-warning fg-contrast p-2xsmall">.bg-warning</p>
<p class="bg-info fg-contrast p-2xsmall">.bg-info</p>
<p class="bg-black fg-contrast p-2xsmall">.bg-black</p>
<p class="bg-white fg-contrast p-2xsmall">.bg-white</p>

Context Backgrounds

Body backgrounds are available for every context color.

.primary-bg-main

.primary-bg-even

.primary-bg-evident

.primary-bg-inverse

.primary-base-color

.primary-bg-highlight

html

<p class="primary-bg-main primary-fg-main p-2xsmall">.primary-bg-main</p>
<p class="primary-bg-even primary-fg-main p-2xsmall">.primary-bg-even</p>
<p class="primary-bg-evident primary-fg-main p-2xsmall">.primary-bg-evident</p>
<p class="primary-bg-inverse primary-fg-inverse p-2xsmall">.primary-bg-inverse</p>
<p class="primary-base-color primary-contrast-color p-2xsmall">.primary-base-color</p>
<p class="primary-bg-highlight primary-fg-main p-2xsmall">.primary-bg-highlight</p>

Context Scenes

.dim-main

.dim-subtle

.dim-slight

.transparent-color

html

<p class="dim-main fg-inverse p-2xsmall">.dim-main</p>
<p class="dim-subtle p-2xsmall">.dim-subtle</p>
<p class="dim-slight p-2xsmall">.dim-slight</p>
<p class="transparent-color p-2xsmall">.transparent-color</p>

.secondary-dim-main

.secondary-dim-subtle

.secondary-dim-slight

.secondary-transparent-color

html

<p class="secondary-dim-main p-2xsmall">.secondary-dim-main</p>
<p class="secondary-dim-subtle p-2xsmall">.secondary-dim-subtle</p>
<p class="secondary-dim-slight p-2xsmall">.secondary-dim-slight</p>
<p class="secondary-transparent-color p-2xsmall">.secondary-transparent-color</p>

Background gradient

By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

Do you need a gradient in your custom CSS? Just add background-image: var(--cx-gradient);.

.bg-default.bg-gradient

.bg-alternate.bg-gradient

.bg-primary.bg-gradient

.bg-secondary.bg-gradient

.bg-neutral.bg-gradient

.bg-danger.bg-gradient

.bg-success.bg-gradient

.bg-warning.bg-gradient

.bg-info.bg-gradient

.bg-black.bg-gradient

.bg-white.bg-gradient

html

<p class="bg-default bg-gradient fg-contrast p-xsmall">.bg-default.bg-gradient</p>
<p class="bg-alternate bg-gradient fg-contrast p-xsmall">.bg-alternate.bg-gradient</p>
<p class="bg-primary bg-gradient fg-contrast p-xsmall">.bg-primary.bg-gradient</p>
<p class="bg-secondary bg-gradient fg-contrast p-xsmall">.bg-secondary.bg-gradient</p>
<p class="bg-neutral bg-gradient fg-contrast p-xsmall">.bg-neutral.bg-gradient</p>
<p class="bg-danger bg-gradient fg-contrast p-xsmall">.bg-danger.bg-gradient</p>
<p class="bg-success bg-gradient fg-contrast p-xsmall">.bg-success.bg-gradient</p>
<p class="bg-warning bg-gradient fg-contrast p-xsmall">.bg-warning.bg-gradient</p>
<p class="bg-info bg-gradient fg-contrast p-xsmall">.bg-info.bg-gradient</p>
<p class="bg-black bg-gradient fg-contrast p-xsmall">.bg-black.bg-gradient</p>
<p class="bg-white bg-gradient fg-contrast p-xsmall">.bg-white.bg-gradient</p>

Opacity

Using CSS variables for background-color utilities allows for real-time color changes without compilation and dynamic alpha transparency changes.

How it works

Consider our .bg-primary utility.

.bg-primary {
  background-color: oklch(from var(--cx-primary) l c h / var(--cx-bg-opacity, 1)) !important;
}
.bg-opacity-50 {
  --cx-bg-opacity: var(--cx-opacity-50);
}

We use the --cx-primary CSS variable directly with CSS relative color syntax, and attach a second CSS variable, --cx-bg-opacity, for the alpha transparency (with a default value 1). The oklch(from ...) expression derives the color from the variable and applies the opacity channel. Then, the opacity class overrides the default opacity by setting --cx-bg-opacity on the element.

Example

To change that opacity, override --cx-bg-opacity via custom styles or inline styles.

This is default primary background

This is 40% opacity primary background

html

<div class="bg-primary p-2xsmall primary-contrast-color">
This is default primary background</div>
<div style="--cx-bg-opacity: .4;" class="bg-primary p-2xsmall">
This is 40% opacity primary background</div>

Or, choose from any of the .bg-opacity-* utilities:

This is bg-opacity-solid background

This is bg-opacity-95 background

This is bg-opacity-90 background

This is bg-opacity-80 background

This is bg-opacity-70 background

This is bg-opacity-60 background

This is bg-opacity-50 background

This is bg-opacity-40 background

This is bg-opacity-30 background

This is bg-opacity-20 background

This is bg-opacity-10 background

This is bg-opacity-05 background

This is bg-opacity-zero background

html

<div class="bg-primary bg-opacity-solid p-2xsmall">This is <code>bg-opacity-solid</code> background</div>
<div class="bg-primary bg-opacity-95 p-2xsmall">This is <code>bg-opacity-95</code> background</div>
<div class="bg-primary bg-opacity-90 p-2xsmall">This is <code>bg-opacity-90</code> background</div>
<div class="bg-primary bg-opacity-80 p-2xsmall">This is <code>bg-opacity-80</code> background</div>
<div class="bg-primary bg-opacity-70 p-2xsmall">This is <code>bg-opacity-70</code> background</div>
<div class="bg-primary bg-opacity-60 p-2xsmall">This is <code>bg-opacity-60</code> background</div>
<div class="bg-primary bg-opacity-50 p-2xsmall">This is <code>bg-opacity-50</code> background</div>
<div class="bg-primary bg-opacity-40 p-2xsmall">This is <code>bg-opacity-40</code> background</div>
<div class="bg-primary bg-opacity-30 p-2xsmall">This is <code>bg-opacity-30</code> background</div>
<div class="bg-primary bg-opacity-20 p-2xsmall">This is <code>bg-opacity-20</code> background</div>
<div class="bg-primary bg-opacity-10 p-2xsmall">This is <code>bg-opacity-10</code> background</div>
<div class="bg-primary bg-opacity-05 p-2xsmall">This is <code>bg-opacity-05</code> background</div>
<div class="bg-primary bg-opacity-zero p-2xsmall">This is <code>bg-opacity-zero</code> background</div>

Context Opacity

You can directly apply a context opacity utility to match scene-* colors:

This is dim-main opacity primary background

This is dim-subtle opacity primary background

This is dim-slight opacity primary background

This is transparent-color opacity primary background

html

<div class="bg-primary bg-opacity-dim p-2xsmall">This is <code>dim-main</code> opacity primary background</div>
<div class="bg-primary bg-opacity-blur p-2xsmall">This is <code>dim-subtle</code> opacity primary background</div>
<div class="bg-primary bg-opacity-shade p-2xsmall">This is <code>dim-slight</code> opacity primary background</div>
<div class="bg-primary bg-opacity-clear p-2xsmall">This is <code>transparent-color</code> opacity primary background</div>

CSS

This component can be customized using CSS variables, allowing for styles to be modified dynamically on the page. These CSS variables are part of Chassis CSS's design token system, giving design teams control over component appearance. See the design tokens page for more details.

Variables

These CSS variables control the component's appearance and can be modified dynamically on the page. Components use cascading variables, allowing seamless variations in size, color, and style without redundant style declarations through component inheritance and the context class system.

Sass variables

These Sass variables are also exposed as CSS custom properties using the --cx- prefix. A Sass variable $variable-name becomes available as --cx-variable-name in CSS, allowing for styles to be modified dynamically on the page. See the context components page for more details.

Most background-color utilities are generated by our context colors, reassigned from our generic color palette variables.

scss/tokens/_colors.scss

$default:       $cx-color-base-context-light-black-base-color;
$alternate:     $cx-color-base-context-light-white-base-color;
$primary:       $cx-color-base-context-light-primary-base-color;
$secondary:     $cx-color-base-context-light-secondary-base-color;
$neutral:       $cx-color-base-context-light-neutral-base-color;
$danger:        $cx-color-base-context-light-danger-base-color;
$success:       $cx-color-base-context-light-success-base-color;
$warning:       $cx-color-base-context-light-warning-base-color;
$info:          $cx-color-base-context-light-info-base-color;
$black:         $cx-color-base-context-light-black-base-color;
$white:         $cx-color-base-context-light-white-base-color;

scss/tokens/_index.scss

$opacity-dim-main:         $cx-opacity-context-dim-main;
$opacity-dim-subtle:        $cx-opacity-context-dim-subtle;
$opacity-dim-slight:       $cx-opacity-context-dim-slight;
$opacity-transparent-color:       $cx-opacity-context-transparent-color;

scss/_variables.scss

$bg-gradient: linear-gradient(180deg, #{to-opacity($white, .15)}, #{to-opacity($white, 0)});

Generated utilities.

scss/utilities/_index.scss

"bg-color": (
  css-var: true,
  css-variable-name: bg-color,
  class: bg,
  values: map-merge(
    map-loop($context-colors, opacity-var, #{"$key"}, #{"bg"}),
    ( "transparent": transparent )
  )
),
"bg-opacity": (
  css-var: true,
  css-variable-name: bg-opacity,
  class: bg-opacity,
  values: $bg-opacities
),

Sass maps

Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.

scss/maps/_colors.scss

$context-colors: (
  "default":    $default,
  "alternate":  $alternate,
  "primary":    $primary,
  "secondary":  $secondary,
  "neutral":    $neutral,
  "warning":    $warning,
  "success":    $success,
  "danger":     $danger,
  "info":       $info,
  "black":      $black,
  "white":      $white
);

scss/maps/_opacities.scss

// scss-docs-start basic-opacities-map
$basic-opacities: (
  "100": 1,
  "75": .75,
  "50": .5,
  "25": .25,
  "10": .1,
  "0": 0,
);
// scss-docs-end basic-opacities-map
// scss-docs-start token-opacities-map
$token-opacities: (
  "solid":                $opacity-solid,
  "95":                   $opacity-95,
  "90":                   $opacity-90,
  "80":                   $opacity-80,
  "70":                   $opacity-70,
  "60":                   $opacity-60,
  "50":                   $opacity-50,
  "40":                   $opacity-40,
  "30":                   $opacity-30,
  "20":                   $opacity-20,
  "10":                   $opacity-10,
  "05":                   $opacity-05,
  "zero":                 $opacity-zero,
);
$opacities: $token-opacities; // $base-opacities for lesser CSS generation.
// scss-docs-end token-opacities-map