Opacity

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, .5 is 50% visible, and 0 is completely transparent.

Set the opacity of an element using .opacity-{value} utilities.

<div class="opacity-solid">...</div>
<div class="opacity-95">...</div>
<div class="opacity-90">...</div>
<div class="opacity-80">...</div>
<div class="opacity-70">...</div>
<div class="opacity-60">...</div>
<div class="opacity-50">...</div>
<div class="opacity-40">...</div>
<div class="opacity-30">...</div>
<div class="opacity-20">...</div>
<div class="opacity-10">...</div>
<div class="opacity-05">...</div>
<div class="opacity-zero">...</div>

Property Opacities

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

How it works

Consider our default .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.

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

Context Opacities

Contextual opacities can be used in combination with utilities.

Foreground

Text opacities are available with fg-* utilities.

<p class="fg-primary">Base opacity</p>
<p class="fg-primary fg-opacity-subtle">Smooth opacity</p>
<p class="fg-primary fg-opacity-slight">Slight opacity</p>

Check out color page for more details.

Background

Scene opacities are available with bg-* utilities.

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

Check out background page for more details.

Border

Border opacities are available with obj-* utilities.

<p class="border border-primary p-xsmall">Base opacity</p>
<p class="border border-primary border-opacity-main p-xsmall">Border opacity</p>
<p class="border border-primary border-opacity-subtle p-xsmall">Separator opacity</p>

Check out borders page for more details.

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.

$opacity-zero:         $cx-opacity-level-zero;
$opacity-95:           $cx-opacity-level-95;
$opacity-90:           $cx-opacity-level-90;
$opacity-80:           $cx-opacity-level-80;
$opacity-70:           $cx-opacity-level-70;
$opacity-60:           $cx-opacity-level-60;
$opacity-50:           $cx-opacity-level-50;
$opacity-40:           $cx-opacity-level-40;
$opacity-30:           $cx-opacity-level-30;
$opacity-20:           $cx-opacity-level-20;
$opacity-10:           $cx-opacity-level-10;
$opacity-05:           $cx-opacity-level-05;
$opacity-solid:        $cx-opacity-level-solid;

Sass Maps

Opacity utilities are generated from Sass maps using utilities API.

// 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

Utilities API

Opacity utilities are declared in our utilities API in scss/utilities/_index.scss. Learn how to use the utilities API.

"opacity": (
  property: opacity,
  class: opacity,
  values: $opacities
)