Effect

var(--set-effect-opacity-disabled)

Opacity for disabled controls. A fallback for when color treatments (e.g. muted foreground, subtle background) can't fully convey the state.

var(--set-effect-opacity-demoted)

Opacity for de-emphasised content. Use for elements pushed visually into the background but still perceivable (e.g. dimming surrounding content to draw attention to a focused element).

var(--set-effect-shadow-default)

Default elevation shadow. Use on any element that should appear lifted above the page (cards, popovers, controls).

var(--set-effect-stroke-inset)

Inset stroke. Use with outset to create a decorative offset stroke effect (e.g. on cards). Applied at the block-end and inline-end edges.

var(--set-effect-stroke-outset)

Outset stroke. Use with inset to create a decorative offset stroke effect (e.g. on cards). Applied at the block-start and inline-start edges.

var(--set-effect-filter-image)

Image filter. Use on imagery (photos, illustrations) to apply a styled image treatment.