Progressive Blur
Adds a layered CSS progressive blur overlay fading from the top or bottom of a page
- Repository
- MengTo/Skills
- Stars
- 7,187
- Licence
- MIT
- Files
- 4 files
What it does
Once installed, the agent can produce ready-to-paste HTML and CSS for a soft, stepped blur that fades in from the top or bottom edge of a web page, the frosted look often seen in modern app interfaces. It stacks several blur layers of increasing strength with gradient masks so the transition looks smooth rather than abrupt. The agent also knows the setup rules, such as keeping the element high in the DOM, keeping pointer events off so clicks still work, and placing it above content but below modals.
Great for
- Front-end developers who want a polished blurred header or footer overlay without hand-writing the layered masks
- Designers prototyping a frosted-glass edge effect and wanting quick tweaks to height, direction or blur strength
- Anyone who has asked an AI assistant for a 'progressive blur' and wants consistent, tested-looking code
Skip it if
- Projects that need broad browser support for backdrop-filter and CSS mask, since older browsers may not render the effect (reason: compatibility is not addressed in the files)
- Pages with a flat background, because backdrop-filter has nothing to blur (reason: the skill itself warns about this)
- Performance-sensitive pages on low-end devices, since high blur values are GPU-heavy (reason: the skill itself warns about this)
Try asking
- “Create a progressive blur bar at the top of my page that fades out over the content”
- “Add a bottom gradient blur overlay behind my mobile navigation bar”
- “Make the top blur taller, about 20% of the viewport, and reduce it to fewer steps for performance”
- “Show me where to place the gradient blur element in my React layout so it sits below modals”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 4 original files, the MIT licence and an attribution note.
progressive-blur.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip progressive-blur.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip progressive-blur.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Name the placement explicitly (top or bottom) and the height you want, since the skill asks for these first.
- Tell the agent what sits behind the blur area so it can confirm there is content to blur.
- If the effect is slow on a target device, ask for fewer blur layers or lower maximum blur values.
What's inside
- demo/index.html
- demo/PROMPT.md
- demo/source.json
- SKILL.md
Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.