Overlay

Full viewport backdrop for modals, dialogs, and drawers. Controls visibility via state modifiers.

Default

Content behind overlay

Base

Class	Description
`.ui-overlay`	Base class

Light

Class	Description
`.ui-overlay--light`	light

Blur

Class	Description
`.ui-overlay--blur`	blur

Visible

Class	Description
`.ui-overlay--visible`	visible

Animate

Class	Description
`.ui-overlay--animate`	animate

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-overlay-bg`	`var(--ui-overlay-bg)`	Background color
`--ui-overlay-z`	`var(--ui-z-index-overlay)`	Z-index stacking order
`--ui-overlay-bg-light`	`var(--ui-overlay-bg-light)`	Bg light
`--ui-overlay-bg-blur`	`var(--ui-overlay-bg-blur)`	Bg blur

Light Variant

Dark content behind light overlay

<div class="demo-area" style="--demo-h: 120px; background: var(--ui-color-text)">
  <div class="ui-overlay ui-overlay--light ui-absolute"></div>
  <p style="position: relative; padding: var(--ui-space-2); color: white;">Dark content behind light overlay</p>
</div>

Blur Variant

Blurred backdrop

<div class="demo-area" style="--demo-h: 120px; background: linear-gradient(45deg, var(--ui-color-primary), var(--ui-color-success))">
  <div class="ui-overlay ui-overlay--blur ui-absolute"></div>
  <p style="position: relative; padding: var(--ui-space-2); color: white;">Blurred backdrop</p>
</div>

With Animation

<div class="demo-area" style="--demo-h: 120px">
  <div class="ui-overlay ui-overlay--animate ui-overlay--visible ui-absolute"></div>
</div>