Skip to main contentSkip to docs navigation
View on GitHub

Opacity

Element-level and per-property opacity utilities with context-named opacity token support.

On this page
@layer utilities
Scoped tokens

The .opacity-{value} utilities set the CSS opacity property on an element. A value of 1 is fully opaque, .5 is 50% visible, and 0 is fully transparent.

solid
95
90
80
70
60
50
40
30
20
10
05
zero
HTML
<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>

Per-property opacity

Several utility types — background, foreground, and border — support per-property opacity through CSS variable overrides, allowing opacity changes without affecting the entire element.

How it works

These utilities depend on CSS relative color syntax. The color utility sets both the color value and a --cx-{type}-opacity variable (defaulting to 1). A paired opacity utility overrides that variable to adjust transparency.

CSS
.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);
}

Opacity override

The opacity variable can be set inline or via a .bg-opacity-* utility.

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

Context opacities

Context-named opacity utilities correspond to the design token scale and can be applied to foreground, background, and border properties.

Foreground

Foreground opacity utilities apply context-named opacity values to .fg-* color classes.

Base color

fg-subtle opacity

fg-slight opacity

HTML
<p class="fg-primary">Base color</p>
<p class="fg-primary fg-opacity-subtle"><code>fg-subtle</code> opacity</p>
<p class="fg-primary fg-opacity-slight"><code>fg-slight</code> opacity</p>

Check out color page for more details.

Background

Background opacity utilities apply scene-token opacity values to .bg-* color classes.

Base background
dim-main opacity
dim-subtle opacity
dim-slight opacity
HTML
<div class="bg-primary p-xsmall">Base background</div>
<div class="bg-primary bg-opacity-main p-xsmall"><code>dim-main</code> opacity</div>
<div class="bg-primary bg-opacity-subtle p-xsmall"><code>dim-subtle</code> opacity</div>
<div class="bg-primary bg-opacity-slight p-xsmall"><code>dim-slight</code> opacity</div>

Check out background page for more details.

Border

Border opacity utilities apply context-named opacity values to .border-* color classes.

Base border

border-main opacity

border-subtle opacity

HTML
<p class="border border-primary p-xsmall">Base border</p>
<p class="border border-primary border-opacity-main p-xsmall"><code>border-main</code> opacity</p>
<p class="border border-primary border-opacity-subtle p-xsmall"><code>border-subtle</code> opacity</p>

Check out borders page for more details.

CSS

Opacity utilities are generated from Sass maps built on design token values via the utilities API.

Reference

The table lists all opacity utilities and their CSS properties.

ClassProperties
.border-opacity-solid--cx-border-opacity: var(--cx-opacity-solid);
.border-opacity-95--cx-border-opacity: var(--cx-opacity-95);
.border-opacity-90--cx-border-opacity: var(--cx-opacity-90);
.border-opacity-80--cx-border-opacity: var(--cx-opacity-80);
.border-opacity-70--cx-border-opacity: var(--cx-opacity-70);
.border-opacity-60--cx-border-opacity: var(--cx-opacity-60);
.border-opacity-50--cx-border-opacity: var(--cx-opacity-50);
.border-opacity-40--cx-border-opacity: var(--cx-opacity-40);
.border-opacity-30--cx-border-opacity: var(--cx-opacity-30);
.border-opacity-20--cx-border-opacity: var(--cx-opacity-20);
.border-opacity-10--cx-border-opacity: var(--cx-opacity-10);
.border-opacity-05--cx-border-opacity: var(--cx-opacity-05);
.border-opacity-zero--cx-border-opacity: var(--cx-opacity-zero);
.border-opacity-main--cx-border-opacity: var(--cx-opacity-border-main);
.border-opacity-subtle--cx-border-opacity: var(--cx-opacity-border-subtle);
.icon-opacity-solid--cx-icon-opacity: var(--cx-opacity-solid);
.icon-opacity-95--cx-icon-opacity: var(--cx-opacity-95);
.icon-opacity-90--cx-icon-opacity: var(--cx-opacity-90);
.icon-opacity-80--cx-icon-opacity: var(--cx-opacity-80);
.icon-opacity-70--cx-icon-opacity: var(--cx-opacity-70);
.icon-opacity-60--cx-icon-opacity: var(--cx-opacity-60);
.icon-opacity-50--cx-icon-opacity: var(--cx-opacity-50);
.icon-opacity-40--cx-icon-opacity: var(--cx-opacity-40);
.icon-opacity-30--cx-icon-opacity: var(--cx-opacity-30);
.icon-opacity-20--cx-icon-opacity: var(--cx-opacity-20);
.icon-opacity-10--cx-icon-opacity: var(--cx-opacity-10);
.icon-opacity-05--cx-icon-opacity: var(--cx-opacity-05);
.icon-opacity-zero--cx-icon-opacity: var(--cx-opacity-zero);
.icon-opacity-subtle--cx-icon-opacity: var(--cx-opacity-icon-subtle);
.icon-opacity-slight--cx-icon-opacity: var(--cx-opacity-icon-slight);
.fg-opacity-solid--cx-fg-opacity: var(--cx-opacity-solid);
.fg-opacity-95--cx-fg-opacity: var(--cx-opacity-95);
.fg-opacity-90--cx-fg-opacity: var(--cx-opacity-90);
.fg-opacity-80--cx-fg-opacity: var(--cx-opacity-80);
.fg-opacity-70--cx-fg-opacity: var(--cx-opacity-70);
.fg-opacity-60--cx-fg-opacity: var(--cx-opacity-60);
.fg-opacity-50--cx-fg-opacity: var(--cx-opacity-50);
.fg-opacity-40--cx-fg-opacity: var(--cx-opacity-40);
.fg-opacity-30--cx-fg-opacity: var(--cx-opacity-30);
.fg-opacity-20--cx-fg-opacity: var(--cx-opacity-20);
.fg-opacity-10--cx-fg-opacity: var(--cx-opacity-10);
.fg-opacity-05--cx-fg-opacity: var(--cx-opacity-05);
.fg-opacity-zero--cx-fg-opacity: var(--cx-opacity-zero);
.fg-opacity-subtle--cx-fg-opacity: var(--cx-opacity-fg-subtle);
.fg-opacity-slight--cx-fg-opacity: var(--cx-opacity-fg-slight);
.bg-opacity-solid--cx-bg-opacity: var(--cx-opacity-solid);
.bg-opacity-95--cx-bg-opacity: var(--cx-opacity-95);
.bg-opacity-90--cx-bg-opacity: var(--cx-opacity-90);
.bg-opacity-80--cx-bg-opacity: var(--cx-opacity-80);
.bg-opacity-70--cx-bg-opacity: var(--cx-opacity-70);
.bg-opacity-60--cx-bg-opacity: var(--cx-opacity-60);
.bg-opacity-50--cx-bg-opacity: var(--cx-opacity-50);
.bg-opacity-40--cx-bg-opacity: var(--cx-opacity-40);
.bg-opacity-30--cx-bg-opacity: var(--cx-opacity-30);
.bg-opacity-20--cx-bg-opacity: var(--cx-opacity-20);
.bg-opacity-10--cx-bg-opacity: var(--cx-opacity-10);
.bg-opacity-05--cx-bg-opacity: var(--cx-opacity-05);
.bg-opacity-zero--cx-bg-opacity: var(--cx-opacity-zero);
.bg-opacity-main--cx-bg-opacity: var(--cx-opacity-dim-main);
.bg-opacity-subtle--cx-bg-opacity: var(--cx-opacity-dim-subtle);
.bg-opacity-slight--cx-bg-opacity: var(--cx-opacity-dim-slight);
.cue-opacity-solid--cx-cue-opacity: var(--cx-opacity-solid);
.cue-opacity-95--cx-cue-opacity: var(--cx-opacity-95);
.cue-opacity-90--cx-cue-opacity: var(--cx-opacity-90);
.cue-opacity-80--cx-cue-opacity: var(--cx-opacity-80);
.cue-opacity-70--cx-cue-opacity: var(--cx-opacity-70);
.cue-opacity-60--cx-cue-opacity: var(--cx-opacity-60);
.cue-opacity-50--cx-cue-opacity: var(--cx-opacity-50);
.cue-opacity-40--cx-cue-opacity: var(--cx-opacity-40);
.cue-opacity-30--cx-cue-opacity: var(--cx-opacity-30);
.cue-opacity-20--cx-cue-opacity: var(--cx-opacity-20);
.cue-opacity-10--cx-cue-opacity: var(--cx-opacity-10);
.cue-opacity-05--cx-cue-opacity: var(--cx-opacity-05);
.cue-opacity-zero--cx-cue-opacity: var(--cx-opacity-zero);
.cue-opacity-slight--cx-cue-opacity: var(--cx-opacity-cue-slight);
.opacity-solidopacity: var(--cx-opacity-solid);
.opacity-95opacity: var(--cx-opacity-95);
.opacity-90opacity: var(--cx-opacity-90);
.opacity-80opacity: var(--cx-opacity-80);
.opacity-70opacity: var(--cx-opacity-70);
.opacity-60opacity: var(--cx-opacity-60);
.opacity-50opacity: var(--cx-opacity-50);
.opacity-40opacity: var(--cx-opacity-40);
.opacity-30opacity: var(--cx-opacity-30);
.opacity-20opacity: var(--cx-opacity-20);
.opacity-10opacity: var(--cx-opacity-10);
.opacity-05opacity: var(--cx-opacity-05);
.opacity-zeroopacity: var(--cx-opacity-zero);

Custom properties

Opacity utilities read their values at runtime from :root custom properties.

scss/_root.scss
@each $name, $value in map.merge($opacities, $context-opacities) {
  --opacity-#{$name}: #{$value};
}

Design tokens

Opacity utilities consume design tokens from Chassis Tokens with the $cx- prefix. — See thedesign tokens page.

scss/tokens/_opacity.scss
$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;
scss/tokens/_opacity.scss
$opacity-fg-slight:       $cx-opacity-context-fg-slight;
$opacity-fg-subtle:       $cx-opacity-context-fg-subtle;
scss/tokens/_opacity.scss
$opacity-border-main:     $cx-opacity-context-border-main;
$opacity-border-subtle:   $cx-opacity-context-border-subtle;
scss/tokens/_opacity.scss
$opacity-icon-subtle:     $cx-opacity-context-icon-subtle;
$opacity-icon-slight:     $cx-opacity-context-icon-slight;
scss/tokens/_opacity.scss
$opacity-cue-slight:      $cx-opacity-context-icon-slight;
scss/tokens/_opacity.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;

Sass Maps

Opacity utilities are generated from Sass maps in scss/maps/_opacities.scss.

$opacities defines the full token-named opacity scale for .opacity-{level} utilities.

scss/maps/_opacities.scss
$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,
);

Each color type has its own opacity map with their semantic opacity levels for .{type}-opacity-{level} utilities.

scss/maps/_opacities.scss
$fg-opacities: (
  "subtle": $opacity-fg-subtle,
  "slight": $opacity-fg-slight,
);
scss/maps/_opacities.scss
$border-opacities: (
  "main": $opacity-border-main,
  "subtle": $opacity-border-subtle,
);
scss/maps/_opacities.scss
$icon-opacities: (
  "subtle": $opacity-icon-subtle,
  "slight": $opacity-icon-slight,
);
scss/maps/_opacities.scss
$cue-opacities: (
  "slight": $opacity-cue-slight,
);
scss/maps/_opacities.scss
$dim-opacities: (
  "main":       $opacity-dim-main,
  "subtle":     $opacity-dim-subtle,
  "slight":     $opacity-dim-slight,
);

Utilities API

.opacity-* utilities are declared in scss/utilities/_index.scss using the utilities API.

scss/utilities/_index.scss
"opacity": (
  property: opacity,
  class: opacity,
  values: map-loop($opacities, varify, "$key", "opacity")
),

.{type}-opacity-* utilities are declared in their respective utility files. See background, foreground, and border, and icon pages for more details.