Skills 仓库中的 Progressive Blur 技能：用 backdrop-filter 与 mask 实现分层渐变模糊并复刻高级定价页面

Progressive Blur（分层渐变模糊）是一种利用多层backdrop-filter配合mask渐变遮罩，让模糊强度从视口边缘向页面内部逐级衰减的现代 CSS 视觉效果。本指南基于 Skills 仓库中的 progressive-blur 技能（SKILL.md）与其 GOLABS 演示（demo/PROMPT.md），完整讲解从顶部/底部开始的两套可复制代码、全部定制旋钮、常见坑点，以及如何用该技能以 Agent 工作流重建出 GOLABS | Performance Hydration Collection 级别的定价页面。读完本文，你将能独立产出可直接运行的渐进模糊遮罩，并掌握用 $progressive-blur 技能驱动 AI 编码 Agent 复刻与二次创作整套页面的完整方法论。

上图来自仓库内 demo/assets/source-preview.jpg：页面底部商品列表区域从清晰到模糊逐级过渡，正是 Progressive Blur 的典型落地场景；demo/preview.jpg 则为未叠加模糊的基准清晰版，二者可对照观察效果差异。

一、什么是 Progressive Blur：技能定位与适用场景

仓库中的 progressive-blur 技能在 SKILL.md 中明确定义为：

Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness.

即：使用多个backdrop-filter遮罩，在视口顶部或底部叠加一个"模糊从边缘向内逐层增强/衰减"的渐变过渡带，为页面制造纵深感和柔和感。它适用于这些请求场景：

• “progressive blur”（渐进模糊）
• “gradient blur overlay”（渐变模糊叠加层）
• “stepped blur masks that fade from an edge of the viewport”（从视口边缘淡入的分段模糊遮罩）

其底层原理是：单一backdrop-filter: blur(Npx)只会给出均匀模糊，而真实世界中的景深效果是从清晰到模糊连续过渡的。通过把容器拆分为多个叠层（层叠z-index递增），每层使用不同半径的模糊值，再用mask线性渐变控制每层只在特定区间可见，就能合成出平滑的“由浅入深”模糊带。

从仓库配套的 demo/source.json 可见，该技能的演示设计在 Neuform 平台中为progressive-blur技能排名第 1（ranking.position 为 1，排序规则为 view_count desc 优先），设计稿为 GOLABS | Performance Hydration Collection（381 次浏览、32 次收藏、2 次二次创作），这为本文的演示重建章节提供了具体的质量基准背景。

二、技能标准工作流与使用检查清单

2.1 三步工作流

按 SKILL.md 的规定，Agent（或人工）使用该技能时必须遵循三步流程：

1. 确认放置位置：先确认模糊带是放在顶部（top）还是底部（bottom）、占据多高（height）、相对 UI 的z-index 层级；
2. 给出对应代码片段与使用清单：根据确认结果提供顶部或底部的匹配代码块，并附上简短的使用检查清单；
3. 只做定向微调：后续迭代只允许针对四个参数做定点调整——高度（height）、模糊步数（blur steps）、方向（direction）、透明度停靠点（opacity stops），不做大范围重写。

2.2 使用检查清单

• 将 HTML 片段插入<body>内部；
• 让.gradient-blur元素尽量靠近 DOM 顶部（保持在文档流靠前位置）；
• 确保其背后存在真实内容——backdrop-filter模糊的是它后面的元素，背后为空时不会产生任何效果；
• 调整z-index使其位于普通内容之上、但位于模态框（modal）之下。

三、从顶部开始的模糊（Top Blur，完整可复制代码）

以下为 SKILL.md 提供的顶部模糊标准实现，共 8 个模糊层（::before+ 6 个div+::after），模糊半径从 0.5px 逐级翻倍到 64px：

<div class="gradient-blur"> <div></div><div></div><div></div><div></div><div></div><div></div> </div> <style> .gradient-blur { position: fixed; z-index: 5; inset: 0 0 auto 0; height: 12%; pointer-events: none; } .gradient-blur > div, .gradient-blur::before, .gradient-blur::after { position: absolute; inset: 0; } .gradient-blur::before { content: ""; z-index: 1; backdrop-filter: blur(0.5px); mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 37.5%); } .gradient-blur > div:nth-of-type(1) { z-index: 2; backdrop-filter: blur(1px); mask: linear-gradient(to top, rgba(0, 0, 0, 0) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 0) 50%); } .gradient-blur > div:nth-of-type(2) { z-index: 3; backdrop-filter: blur(2px); mask: linear-gradient(to top, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 62.5%); } .gradient-blur > div:nth-of-type(3) { z-index: 4; backdrop-filter: blur(4px); mask: linear-gradient(to top, rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 0) 75%); } .gradient-blur > div:nth-of-type(4) { z-index: 5; backdrop-filter: blur(8px); mask: linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 87.5%); } .gradient-blur > div:nth-of-type(5) { z-index: 6; backdrop-filter: blur(16px); mask: linear-gradient(to top, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%); } .gradient-blur > div:nth-of-type(6) { z-index: 7; backdrop-filter: blur(32px); mask: linear-gradient(to top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 1) 100%); } .gradient-blur::after { content: ""; z-index: 8; backdrop-filter: blur(64px); mask: linear-gradient(to top, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%); } </style>

层级组织逻辑：::before（0.5px）位于z-index: 1，六个div依次为 1px/2px/4px/8px/16px/32px 且z-index从 2 递增到 7，::after（64px）垫底在z-index: 8。每一层的mask渐变以 12.5% 为步长错开不透明窗口，共同形成从顶部边缘（最强模糊 64px）向页面内（最弱 0.5px）平滑衰减的过渡带。容器本身height: 12%限定了模糊带占用视口高度，pointer-events: none保证它永远不拦截下方内容的鼠标事件。

四、从底部开始的模糊（Bottom Blur，完整可复制代码）

底部版本与顶部版本的差异只有三点：inset改为贴住视口底部、渐变方向改为to bottom、容器高度按需调大（示例为 65%，适合底部商品区等大面积场景）：

<div class="gradient-blur"> <div></div><div></div><div></div><div></div><div></div><div></div> </div> <style> .gradient-blur { position: fixed; z-index: 5; inset: auto 0 0 0; height: 65%; pointer-events: none; } .gradient-blur > div, .gradient-blur::before, .gradient-blur::after { position: absolute; inset: 0; } .gradient-blur::before { content: ""; z-index: 1; backdrop-filter: blur(0.5px); mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 37.5%); } .gradient-blur > div:nth-of-type(1) { z-index: 2; backdrop-filter: blur(1px); mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 0) 50%); } .gradient-blur > div:nth-of-type(2) { z-index: 3; backdrop-filter: blur(2px); mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 62.5%); } .gradient-blur > div:nth-of-type(3) { z-index: 4; backdrop-filter: blur(4px); mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 0) 75%); } .gradient-blur > div:nth-of-type(4) { z-index: 5; backdrop-filter: blur(8px); mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 87.5%); } .gradient-blur > div:nth-of-type(5) { z-index: 6; backdrop-filter: blur(16px); mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%); } .gradient-blur > div:nth-of-type(6) { z-index: 7; backdrop-filter: blur(32px); mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 1) 100%); } .gradient-blur::after { content: ""; z-index: 8; backdrop-filter: blur(64px); mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%); } </style>

五、四个定制旋钮（Customization Knobs）

按 SKILL.md 的规定，技能允许且仅允许以下四类定向微调：

六、常见陷阱（Common Pitfalls）

SKILL.md 明确列出了三个高频问题：

1. backdrop-filter背后必须有内容：它只能模糊"位于其后的元素"，如果背后是纯色平铺背景，将看不到任何模糊效果——这是渐进模糊最常见的"无效"原因；
2. 高模糊值 GPU 开销大：大半径模糊（16px/32px/64px 层）在低端设备上可能造成卡顿，应在低性能设备上减少层数（steps）；
3. 务必保留pointer-events: none：一旦移除，这个覆盖大片视口的透明遮罩会拦截所有点击、滚动事件，导致页面"无法操作"。

七、规格缺失时向用户确认的三个问题

当用户没有给出足够规格时，技能要求按以下三个问题确认：

• 模糊应从顶部还是底部开始？
• 模糊区域应该多高？
• 低端设备上性能是否是顾虑？

这三个问题直接对应第 2.1 节工作流的第一步（placement、height、z-index）与第五节的定制旋钮，确保在产出代码前先锁定关键参数。

八、实战：用 $progressive-blur 复刻 GOLABS 演示页

8.1 最小提示词（Minimal prompt）

仓库的 demo/PROMPT.md 给出了调用该技能的最小提示模板：

Use $progressive-blur to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included Neuform reference.

即：让 Agent 以 $progressive-blur 为技能入口，产出与仓库内 Neuform 参考页同等视觉自信度、信息层级和交互完成度的响应式独立 HTML 页面。

8.2 完整复刻提示词（Recreate the demo）

复刻任务的完整提示为：

Use $progressive-blur to recreate the design quality and behavior ofGOLABS | Performance Hydration Collectionas a complete responsive HTML document. Treat the included demo/index.html as the visual and interaction reference, not as a loose mood board.

要点是把 demo/index.html 当作精确的视觉与交互参照物，而不是一张松散的 mood board。

8.3 产品简报（Product brief）

• 页面概念：GOLABS | Performance Hydration Collection；
• 用途：Golabs Performance Pricing Section 用于方案对比与转化决策，核心要素是方案对比块与转化导向动作，适合订阅定价页与方案对比场景；
• 内容锚点：Complete Hydration System · Daily Hydration Sachets - Citrus · Starter Hydration System · Sleep Hydration Sachets · Core Hydration Drink - Citrus；
• 主题标签：pricing、section、animated、cta、billing。

8.4 技能方向（Skill direction）

• 使用**分层边缘模糊叠加（layered edge blur overlays）**制造纵深，配合顶部与底部的参考片段及调参指南；
• 严格遵循 Progressive Blur 技能的三步工作流（确认位置→给代码片段与使用清单→只做定向微调）；
• 使用检查清单：HTML 插入<body>内、.gradient-blur尽量靠近 DOM 顶部。

8.5 忠实度目标（Fidelity target）

• 匹配参考页的构图、信息密度、字号层级、间距节奏、表面质感、色彩关系与动效克制程度；
• 保留最强的交互与动态背景行为，不要用通用淡入淡出或装饰性动效替换；
• 首屏必须精雕细琢（art-directed），再把同一套设计逻辑贯穿到所有支撑性区块；
• 结果须从移动端到桌面端响应式、键盘可达、开启 reduced motion 时保持稳定；
• 交付完整的index.html，页面自有图片、视频、模型与纹理放入demo/assets/；当源页面依赖外部运行时库时，可保留固定版本的 CDN 依赖。

8.6 参考快照（Reference snapshot）

• 来源：Neuform 的 GOLABS 页面（demo/source.json 中记录了其 id、slug 与 url）；
• Neuform 排名：progressive-blur技能同步时排名第 1；
• 人气数据：381 次浏览 · 32 次收藏 · 2 次二次创作；
• 排名规则：浏览量降序，其次收藏量降序。

8.7 二次创作提示词（Remix prompt）

Use $progressive-blur and the included Neuform demo as the quality bar, but replace the brand, subject, copy, palette, and content. Preserve the underlying layout logic, signature visual treatment, interaction choreography, responsive behavior, and performance constraints so the remix still clearly demonstrates the skill.

二次创作允许替换品牌、主题、文案、配色与内容，但必须保留底层布局逻辑、标志性视觉处理、交互编排、响应式行为与性能约束，确保 Remix 仍然能清楚展示该技能本身。

九、源码佐证：demo 中的真实落地实现

demo/index.html 是仓库内可直接打开的沙箱演示外壳：外层页面通过srcdoc注入内嵌的 GOLABS 页面源码，并通过postMessage协议（neuform-assets-v1）把 demo/assets/ 下的 16 张产品图以URL.createObjectURL的方式注入 iframe（见该文件的loadAsset与postMessage逻辑），外部运行库则固定指向 assets/runtime/ 下的本地运行时文件。

从内嵌页面源码可以确认技能的实际使用参数与 SKILL.md 示例存在合理差异，这正体现了工作流第三步"定向微调"的运用：

• 采用**底部模糊（Bottom Blur）**方案：.gradient-blur { position: fixed; z-index: 40; inset: auto 0 0 0; height: 10vh; pointer-events: none; }；
• 保持 8 层结构（::before0.5px →::after64px），mask 全部为to bottom方向；
• 把z-index提升到 40（高于导航区内容，低于模态层），并把高度从示例的 65% 收紧为10vh——因为该页面把模糊带放在商品网格与底部工具栏之间，只需很矮的过渡即可；
• 页面整体采用 Tailwind 工具类构建（通知栏、sticky 导航、分类 Tab、筛选/排序工具栏、8 张商品卡片的响应式 grid），并用 GSAP ScrollTrigger 做标题的逐字 reveal 入场动画，动效克制而明确。

这一落地实例说明：技能提供的代码是高质量的起点模板，但真实项目中高度、层级、方向都应依据布局场景定向调整——这与技能"只做四类定点微调"的设计哲学完全一致。

十、使用建议与适用前提

• 适用浏览器前提：渐进模糊依赖backdrop-filter与mask（标准mask属性）两项现代 CSS 能力，旧版浏览器需检测降级；若完全不支持，页面应能优雅回退为无模糊状态（遮罩层透明即可）。
• 性能注意：8 层backdrop-filter会持续对屏幕区域做离屏渲染，滚动与动画时开销显著；低端设备请减少 steps 或缩短 height，必要时用prefers-reduced-motion配合关闭入场动画（demo 中 GSAP 入场即属于可在 reduced motion 下稳定的对象）。
• 层级纪律：始终让模糊带位于普通内容之上、模态框之下，并永久保留pointer-events: none。

至此，你已掌握该技能的全部要素：顶部/底部两套可直接复制运行的代码、四个定制旋钮、三大常见坑、规格确认问题，以及从最小提示词到完整复刻再到二次创作的 Agent 提示词工作流。在实际项目中，按"确认放置→给片段与清单→只做定向微调"的节奏即可稳定产出高品质的渐进模糊效果。