progressive-blur

MengTo/Skills · Agent Skill

在應用模糊效果或分層深度時，應該看起來平滑且可控。

前往安裝 ↓

總覽

發布者MengTo社群
儲存庫MengTo/Skills ↗
技能資料夾progressive-blur
星7,038
分支819
附帶檔案5
授權MIT
最近更新2026年10月25日
連結技能原始碼 ↗ · 儲存庫 ↗

Mozgi 檢查

我們在技能檔案中發現的內容。詳細資訊需訂閱。

安全性
低風險 · 未發現明顯風險 — 完整報告會顯示細節
相容性
僅含說明 — 適用於多數代理
相似技能
找到 58 個相似技能
訂閱另含

安裝

技能就是一個含 SKILL.md 的資料夾。選擇你的代理，在專案根目錄的終端機（macOS、Linux 或 Windows 的 Git Bash）執行指令。

把提示貼到 Claude、Codex 或其他助理：它會自行檢查並安裝技能。

Install the “progressive-blur” skill from mozgi.io (https://mozgi.io/skills/mengto-progressive-blur/) for me.

1. Download the archive: https://mozgi.io/skills/mengto-progressive-blur/download
   If it fails, take the skill folder from the source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/progressive-blur
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “progressive-blur” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/progressive-blur/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

技能檔案

5 個檔案 下載 ZIP

安裝前請先檢視 SKILL.md 與相關檔案。點擊檔案即可預覽。

SKILL.md 內容

作者原文 · 唯讀

Progressive Blur Skill

Workflow

1. Confirm placement (top or bottom), height, and z-index relative to UI.

2. Provide the matching snippet and a short usage checklist.

3. Offer only targeted tweaks (height, blur steps, direction, opacity stops).

Usage checklist

  • Insert the HTML inside <body>.
  • Keep the .gradient-blur element near the top of the DOM.
  • Ensure the background behind it exists (backdrop-filter blurs what is behind).
  • Adjust z-index to sit above content but below modals.

Top blur (from top)

<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>

Bottom blur (from bottom)

<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

  • Direction: flip to top ↔ to bottom.
  • Height: adjust .gradient-blur height percentage.
  • Strength: change blur values (0.5px → 64px).
  • Steps: add/remove layers to control smoothness.

Common pitfalls

  • backdrop-filter needs content behind it; it will not blur a flat background.
  • High blur values are GPU-heavy; reduce steps on low-end devices.
  • Ensure pointer-events: none stays to avoid blocking clicks.

Questions to ask when specs are missing

  • Should the blur start from the top or bottom?
  • How tall should the blur area be?
  • Is performance a concern on lower-end devices?

常見問題

progressive-blur 技能有什麼用途？

在應用模糊效果或分層深度時，應該看起來平滑且可控。

如何安裝 progressive-blur？

打開本頁的「安裝」區塊並選擇你的代理 — Claude Code、Codex、Cursor 或 Gemini CLI：那裡有把技能資料夾複製到正確位置的現成指令。也可以複製「透過助理」分頁中的提示，讓助理自行檢查並安裝技能。

progressive-blur 適用哪些 AI 模型？

技能是純 Markdown 指示（Agent Skills 格式），因此 progressive-blur 適用任何讀取 SKILL.md 的代理：Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot、OpenCode 等。只有在任務符合技能描述時，模型才會載入指示。

progressive-blur 是免費的嗎？

此技能由 MengTo 公開發布，採用 MIT 授權。技能本身免費 — 你只需向 AI 供應商支付實際使用的 token 費用。

安裝技能安全嗎？

技能是代理會遵循的指示，安裝前請閱讀 SKILL.md 及相關檔案。技能資料夾中的腳本只有在代理執行時才會運行 — 留意它的動作，不要授予多餘權限。

技能和 MCP 伺服器或外掛有何不同？

MCP 伺服器或外掛為模型提供新工具 — 會執行並回傳結果的程式碼。技能提供的是知識與流程：如何處理任務、要遵循哪些步驟、好的成果長什麼樣子。它不需要伺服器或 API 金鑰。

相關技能

所有技能 →
animation-on-scroll 當您需要一個看似故意而非雜亂或過度的滾動控制動畫時使用。 MengTo7k animation-systems 用於建立完整的動畫系統，而不是單獨的動作修正。 MengTo7k gsap 在實現GSAP動畫和需要動畫結構和順序的實用建議時使用。 MengTo7k gsap-scrolltrigger-storytelling 使用GSAP ScrollTrigger建立基於滾動的故事章節 MengTo7k marquee-loop 在建立需要穩定的節奏、間隔和對效能的意識的迴圈標記時使用。 MengTo7k masked-reveal 使用於揭示內容時具有隱藏動作、剪輯過渡或多層次入口。 MengTo7k