---
url: /api/css/mask.md
---
# CSS: mask

`.instui-mask` — An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask). Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `mask` global utility.

**Source:** [mask.css](https://github.com/thedannywahl/pantoken/blob/main/formats/components/src/components/mask/mask.css)

## Usage

```css
@import "@pantoken/components/components.css";
@import "@pantoken/components/mask.css";
```

## Examples

```html
<div style="position: relative">
  <div class="instui-mask">
    <span class="instui-spinner"></span>
  </div>
</div>
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.-blur` | Blur what's behind the mask with a backdrop-filter. |
| `.-fullscreen` | Fixed to the viewport, covering it at a high z-index. |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-component-mask-background-color` | `<color>` | `light-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))` |