blurBlur
Reveal media or content layers with coordinated blur, opacity, and masking.
Preview
A blur filter blends neighboring pixels to soften edges, depth layers, or transitional artifacts.
FullReduced
FullReduced
Preview
Implement Blur: Reveal media or content layers with coordinated blur, opacity, and masking. Use Duration 260ms, Blur radius 14px, Reveal mode blur, Easing soft. Trigger it once when state changes and keep it replayable. Use semantic HTML, scope CSS to .motion-demo--blur. Provide equivalent low-motion behavior for prefers-reduced-motion and .force-reduced-motion.
<div class="motion-demo motion-demo--blur" data-motion="blur" aria-label="Blur demo">
<article class="motion-surface">
<strong>Blur</strong>
<span class="motion-line"></span>
<span class="motion-line"></span>
</article>
</div>.motion-demo.motion-demo--blur {
box-sizing: border-box;
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: 16px;
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: 16px;
box-shadow: none;
}
.motion-demo.motion-demo--blur .motion-surface strong { font-weight: 500; }
.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: 999px;
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: 8px;
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: 16px; }
.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; }
}Learn more
Terms and distinctions
blurBlur
模糊English definition
A blur filter blends neighboring pixels to soften edges, depth layers, or transitional artifacts.
Chinese translation
用于柔化元素或掩盖细小瑕疵的模糊滤镜。
clip-pathClip-path
裁切路径English definition
A geometric clipping region controls which portion of an element is painted.
Chinese translation
把元素裁切成指定形状，可用于揭示、遮罩和前后对比滑杆。
Distinction
Clip-path hides regions with a defined shape boundary; Blur softens pixels and does not define the visible region.
maskMask
遮罩English definition
An alpha or luminance image modulates visibility, allowing gradients and soft-edged reveals.
Chinese translation
使用形状或渐变隐藏、揭示元素的部分区域；它类似裁切路径，同时支持柔和、可渐隐的边缘。
Distinction
Mask controls visible regions through alpha or luminance and supports soft edges; Blur only softens the image.
Before 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.
Accessibility
Reduced motion
Show crisp content directly, preserving only static hierarchy and opacity changes.
Parameter reference
| Parameter | Range / options | Default | Purpose |
|---|---|---|---|
duration | 80ms–1200ms | 260ms | Controls the time required for one motion cycle. |
blur | 0px–32px | 14px | Adjusts blur radius. |
reveal | Blur / Clip / Mask | Blur | Selects reveal mode. |
ease | Soft / Snap / Calm / Linear | Soft | Controls how velocity changes over time. |
Pre-delivery review
- Measure filter cost on large paint areas and lower-end devices.
- Distinguish Blur, Clip-path, and Mask explicitly.