Blur

Backdrop and surface blur steps for frosted chrome.

Prefer semantic roles (overlayScrim, surfaceFrost) — CSS --refineui-blur-overlay-scrim. Do not invent a one-off blur(2px) in components.

Semantic roles

Token	CSS variable	Foundation	Use
overlayScrim	--refineui-blur-overlay-scrim	blur2	Dialog / Drawer scrim backdrop-filter
surfaceFrost	--refineui-blur-surface-frost	blur16	Menu / Dropdown / Select / Context Menu / SidebarPeek frosted panels
scrollEdge	--refineui-blur-scroll-edge	blur2	Rows crossing a ScrollArea edge (data-scroll-edge-item), e.g. Command, Select, Dropdown

Pair the blur with translucent fill surfaceFrosted (--refineui-color-alias-surface-frosted). Opaque backgroundPrimary alone will hide the blur.

Foundation steps

Value-based keys only — extend here before adding new semantic roles.

Token	Value
blurNone	0
blur2	2px
blur4	4px
blur8	8px
blur12	12px
blur16	16px

Scrim tint stays on surfaceOverlay / --refineui-overlay-backdrop (see Opacity and Color). Blur is the filter radius only.

prefers-reduced-transparency: reduce collapses Dialog/Drawer backdrop-filter to none in refineui.css.

Usage

.menu-panel {
  background: var(--refineui-color-alias-surface-frosted);
  backdrop-filter: blur(var(--refineui-blur-surface-frost));
}

.scrim {
  background: var(--refineui-overlay-backdrop);
  backdrop-filter: blur(var(--refineui-blur-overlay-scrim));
}