Motion Lexicon
Search/
中文
System
Motion component

Blur

Reveal media or content layers with coordinated blur, opacity, and masking.

Preview

Live preview

A blur filter used to soften an element or mask tiny imperfections.

Preview
Blur
Authoritative vocabulary

Definition and close-term distinctions

English definitions are preserved verbatim from Animation Vocabulary; translations and distinctions help you choose precisely.

Canonical termblur

Blur

模糊
Authoritative definition

A blur filter used to soften an element or mask tiny imperfections.

Chinese translation

用于柔化元素或掩盖细小瑕疵的模糊滤镜。

Browse all 91 terms
Design contract

Decide before this motion ships

Purpose, frequency, trigger, timing, interruptibility, and gesture rules shape the implementation.

Purpose

Use blur to soften media or transition edges and mask minor loading or compositing imperfections.

Frequency

Use for low-frequency media reveals and background layers, avoiding persistent filters on text and frequent controls.

Trigger

Trigger from media readiness, layer changes, or focus changes with a restrained blur radius.

Enter / exit

Resolve blur quickly to zero with a fade on enter, adding blur on exit only when hierarchy is clear.

Interruptibility

Continue from the current filter value on state changes and remove unnecessary filters after completion.

Gesture and keyboard

No gesture is required; draggable masks and clipping comparisons belong to dedicated interaction patterns.

Reduced-motion strategy

Show crisp content directly, preserving only static hierarchy and opacity changes.

Output

Copy into your interface

Current parameters update visual-state CSS, semantic HTML, the required vanilla JS runtime, and an interaction prompt.

Updates with parameters
motion.css
.motion-demo.motion-demo--blur {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 34rem);
  min-height: 15rem;
  padding: 2rem;
  overflow: hidden;
  color: #18181b;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  isolation: isolate;
}

.motion-demo.motion-demo--blur *, .motion-demo.motion-demo--blur *::before, .motion-demo.motion-demo--blur *::after {
  box-sizing: border-box;
}

.motion-demo.motion-demo--blur .motion-surface {
  position: relative;
  display: grid;
  gap: 0.65rem;
  width: min(100%, 18rem);
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 10px 28px rgb(0 0 0 / 7%);
}

.motion-demo.motion-demo--blur .motion-line {
  display: block;
  width: 100%;
  height: 0.5rem;
  background: #e4e4e7;
  border-radius: 999px;
}

.motion-demo.motion-demo--blur .motion-line:last-child { width: 62%; }

.motion-demo.motion-demo--blur .motion-button {
  position: relative;
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
  color: white;
  font: inherit;
  font-weight: 700;
  background: #18181b;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.motion-demo.motion-demo--blur .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }

.motion-demo.motion-demo--blur .motion-action-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.motion-demo.motion-demo--blur .motion-replay-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--blur .motion-pausable-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--blur button.motion-surface {
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.motion-demo.motion-demo--blur .motion-replay-button,
.motion-demo.motion-demo--blur .motion-undo-button,
.motion-demo.motion-demo--blur .motion-dismiss-button,
.motion-demo.motion-demo--blur .motion-pause-button {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  color: #18181b;
  font: 650 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
  background: #ffffff;
  border: 1px solid #d4d4d8;
  border-radius: 7px;
  cursor: pointer;
}

.motion-demo.motion-demo--blur .motion-replay-button:focus-visible,
.motion-demo.motion-demo--blur .motion-undo-button:focus-visible,
.motion-demo.motion-demo--blur .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--blur .motion-pause-button:focus-visible,
.motion-demo.motion-demo--blur [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--blur [data-swipe-target]:focus-visible {
  outline: 3px solid rgb(37 99 235 / 32%);
  outline-offset: 3px;
}

.motion-demo.motion-demo--blur .motion-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.motion-demo.motion-demo--blur .motion-ripple-ink {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: rgb(255 255 255 / 72%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
}

.motion-demo.motion-demo--blur .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--blur .motion-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 8px; }
.motion-demo.motion-demo--blur .motion-state--to { background: #18181b; color: white; }

.motion-demo.motion-demo--blur .motion-scroll-track > span { color: #71717a; font: 600 0.72rem/1.2 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.motion-demo.motion-demo--blur .motion-orbit-item { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: white; background: #2563eb; border-radius: 50%; }
.motion-demo.motion-demo--blur .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--blur svg { width: min(100%, 20rem); height: auto; }

.motion-demo.motion-demo--blur .motion-surface { animation: motion-blur 260ms cubic-bezier(0.23, 1, 0.32, 1) 0ms both; }
@keyframes motion-blur { from { opacity: 0; filter: blur(14px); transform: translateY(28px); } to { opacity: 1; filter: blur(0); clip-path: inset(0); transform: none; } }

@keyframes motion-blur-reduced-fade {
  from { opacity: 0.84; }
  to { opacity: 1; }
}

.force-reduced-motion .motion-demo.motion-demo--blur {
  animation: motion-blur-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

.force-reduced-motion .motion-demo.motion-demo--blur *,
.force-reduced-motion .motion-demo.motion-demo--blur *::before,
.force-reduced-motion .motion-demo.motion-demo--blur *::after {
  animation: none !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-property: opacity, color, background-color, border-color !important;
  transition-duration: 160ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

.force-reduced-motion .motion-demo.motion-demo--blur .motion-button,
.force-reduced-motion .motion-demo.motion-demo--blur [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--blur [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--blur [data-spring-target] {
  transform: none !important;
}

.force-reduced-motion .motion-demo.motion-demo--blur .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--blur .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--blur .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .motion-demo.motion-demo--blur {
    animation: motion-blur-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
  }

  .motion-demo.motion-demo--blur *, .motion-demo.motion-demo--blur *::before, .motion-demo.motion-demo--blur *::after {
    animation: none !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 160ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .motion-demo.motion-demo--blur .motion-button,
  .motion-demo.motion-demo--blur [data-reorder-item],
  .motion-demo.motion-demo--blur [data-swipe-target],
  .motion-demo.motion-demo--blur [data-spring-target] {
    transform: none !important;
  }

  .motion-demo.motion-demo--blur .motion-path { stroke-dashoffset: 0 !important; }
  .motion-demo.motion-demo--blur .motion-word--from { opacity: 0 !important; visibility: hidden; }
  .motion-demo.motion-demo--blur .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
}
Review notes

Pre-delivery review

  • Measure filter cost on large paint areas and lower-end devices.
  • Distinguish Blur, Clip-path, and Mask explicitly.
Accessibility

Keep information accessible

Reduced motion

Show crisp content directly, preserving only static hierarchy and opacity changes.

Parameters

Parameter reference

ParameterRange / optionsDefaultPurpose
duration80ms–1200ms260msControls the time required for one motion cycle.
blur0px–32px14pxAdjusts blur radius.
revealBlur / Clip / MaskBlurSelects reveal mode.
easeSoft / Snap / Calm / LinearSoftControls how velocity changes over time.
Related entries
Before / after sliderLine drawingText morph