MOTION EFFECT
渐进模糊Progressive Blur
在同一图层上从清晰过渡到模糊，像镜头景深。Magic UI 的 Progressive Blur，比纯色渐变遮罩更自然、更有层次。
效果预览
Progressive Blur底部渐进模糊，压住图片同时保住层次
适合用在哪
图片底部压字（保证标题可读）、内容列表顶部/底部的「还有更多」暗示、长页面边缘柔化。
容易踩的坑
- 大面积 backdrop-filter 叠 3 层在滚动容器里会严重掉帧。
- Safari 不支持渐变遮罩配 backdrop-filter 时，会退化成一条硬边模糊带。
- 底部白色渐变在暗色模式下未切换颜色，变成刺眼的白雾。
设计提示词 · Prompt
渐进模糊（Progressive Blur）：容器 overflow:hidden 并放一张图或彩色底。上面盖一个绝对定位的遮罩层，背景是 linear-gradient(to top, #fff 4%, rgba(255,255,255,.92) 26%, rgba(255,255,255,.35) 54%, transparent 76%)，再叠加 backdrop-filter: blur()。注意真机表现：Safari 对渐变 + backdrop-filter 支持有限，稳妥做法是叠 3 层不同 blur 值的 div，或者用 mask-image 的 linear-gradient 配合已模糊的副本。标题放遮罩之上，字重 730、字距 -0.015em。
Progressive Blur: the container has overflow:hidden and holds an image or colored background. Cover it with an absolutely positioned mask layer whose background is linear-gradient(to top, #fff 4%, rgba(255,255,255,.92) 26%, rgba(255,255,255,.35) 54%, transparent 76%), then add backdrop-filter: blur(). Mind real-device behavior: Safari has limited support for gradient + backdrop-filter, so the safe approach is stacking 3 divs with different blur values, or using a mask-image linear-gradient over a pre-blurred copy. Put the title above the mask, font weight 730, letter-spacing -0.015em.
常见搭配
同一页面里经常和「渐进模糊」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="m-pblur"> <div class="m-pblur__bg"></div> <div class="m-pblur__mask"></div> <div class="m-pblur__t">Progressive Blur<span>底部渐进模糊，压住图片同时保住层次</span></div> </div>