Blur

Blur sizes, and the background blur that separates glass surfaces from the page behind.

Usage

Components use the semantic tokens through their CSS variables; the primitives are only what they point to. Copy a variable from its card.

.element {
  filter: blur(var(--dimension-blur-sm));
}

Blur sizes

Primitives

blur/88px
blur/1616px
blur/2424px

Semantic

blur/sm8px · blur/8
blur/md16px · blur/16
blur/lg24px · blur/24

Background blur

separation/lowblur(8px)
separation/mdblur(16px)
separation/lgblur(24px)