Guide · Agent skill
How to use the Progressive Blur agent skill: install and prompts
Updated · written with AI from the project's own documentation and checked against our catalogue data
The progressive-blur skill is a set of instructions that teaches an AI agent to build a layered CSS blur that fades in from the top or bottom edge of a web page. It is for front-end developers and designers who want a frosted header or footer effect without writing the stacked masks by hand. After this guide you will know how to install the skill, how to ask for a blur in plain language, and what setup rules to check in the code the agent returns.
Progressive BlurMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the progressive-blur ZIP from this page.
- 2Unzip the skill folder. Extract it so progressive-blur/SKILL.md sits in ~/.claude/skills/ or a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. Open Settings, go to Capabilities, and upload the skill under Skills.
- 4Ask for a progressive blur. Describe the edge, height and purpose in plain words, such as a top blur for a header.
- 5Paste and place the code. Insert the HTML inside body and keep the .gradient-blur element near the top of the DOM.
- 6Check layering and clicks. Confirm z-index sits above content but below modals and that pointer-events stays none.
- 7Make targeted tweaks. Ask for changes to height, direction, blur strength or number of steps.
What the progressive-blur skill makes the agent do
An agent skill is a folder with a SKILL.md file that tells an AI agent how to handle a specific kind of task. When this skill is active, the agent answers requests for a progressive blur with ready-to-paste HTML and CSS. The result is a soft, stepped blur that starts at a page edge and fades toward the content.
The effect works by stacking several layers. Each layer uses backdrop-filter with a stronger blur (from 0.5px up to 64px), and each one is limited by a gradient mask so it only shows in a band of the edge. The overlapping bands make the transition look smooth rather than abrupt.
- Top blur: anchored to the top of the viewport, with the element positioned at the top and 12% height by default in the snippet.
- Bottom blur: anchored to the bottom of the viewport, with 65% height by default in the snippet.
- Customization: direction, height, blur strength and number of steps can be adjusted with targeted tweaks.
Install the progressive-blur skill
Download the ZIP for progressive-blur from this page. Unzip it so the progressive-blur folder, which contains SKILL.md, sits in one of these locations: your personal skills folder at ~/.claude/skills/, or a project-specific folder at .claude/skills/ inside your project.
If you use the Claude apps instead of files on disk, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal install: ~/.claude/skills/progressive-blur/
- Project install: .claude/skills/progressive-blur/ inside your project folder
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need special syntax. The skill's description lists the phrases that should activate it, so ask in plain words that match the effect you want. Phrases from the skill description include “progressive blur”, “gradient blur overlay”, and stepped blur masks that fade from an edge of the viewport.
Be specific about placement. The skill's workflow starts by confirming whether the blur goes at the top or bottom, how tall it should be, and how it sits relative to your other UI. If you leave these out, the agent is designed to ask.
- Make a progressive blur header for my landing page.
- Add a gradient blur overlay at the bottom of this product screen, about 40% tall.
- Give me a stepped blur mask that fades from the top edge, with stronger blur near the edge.
- Tweak the blur above so it is shorter and less intense.
Check the setup rules in the generated code
The skill's usage checklist covers the rules that most often break this effect. Check the returned code against them before you paste it into a project.
- Insert the HTML inside <body>.
- Keep the .gradient-blur element near the top of the DOM.
- Make sure there is content behind the blur. backdrop-filter blurs what is behind the element, so a flat background shows no effect.
- Set z-index so the blur sits above content but below modals.
- Keep pointer-events: none so the blur does not block clicks.
Example: the top blur snippet
The skill includes a complete top blur. The core container is shown below. The full snippet also contains six inner layers and a final ::after layer with the strongest blur, which the agent supplies from the skill file.
<div class="gradient-blur">
<div></div><div></div><div></div><div></div><div></div><div></div>
</div>Safety notes: scripts and network
The skill is plain instructions and CSS. According to its listing, it does not run scripts and does not use the network, and it requires nothing else to be installed. Because it is licensed under MIT, you can read every file before use. The demo folder contains an index.html reference page, a PROMPT.md with example prompts, and a source.json file.
Review generated code like any other code before you ship it. The skill does not address browser compatibility, so test the effect in the browsers your audience uses.
Tips for better results
Give the agent a real background to blur, such as a hero image or scrolling text. Ask for one change at a time, because the skill is set up to offer targeted tweaks. If the page feels slow on a low-end device, ask for fewer steps, since high blur values are GPU-heavy.
- Name the edge (top or bottom) and the height in your first request.
- Ask for fewer layers if smoothness matters less than speed.
- Use the demo/PROMPT.md examples as a model for full-page requests.
What people use it for
- Adding a frosted header that blurs scrolling content behind a navigation bar.
- Creating a bottom blur overlay that softens the edge of a product or pricing section.
- Prototyping a frosted-glass edge effect and adjusting its height during a design review.
- Getting consistent layered CSS for a 'progressive blur' request instead of hand-writing six mask layers.
Frequently asked questions
How do I install the progressive-blur skill?
Download the ZIP from this page and unzip it so the progressive-blur folder with SKILL.md sits in ~/.claude/skills/ for personal use or .claude/skills/ inside a project. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.
Is the progressive blur skill free?
The skill is licensed under MIT. This page does not list a price, so check the directory listing for any cost details beyond the licence.
What does the progressive blur skill require?
According to its listing, it requires nothing else to be installed, does not run scripts, and does not use the network. It works by giving an agent instructions and CSS to produce.
Why is my progressive blur not showing?
The most common cause is a flat background, because backdrop-filter has nothing to blur. Make sure content sits behind the .gradient-blur element and that the element is not hidden by a z-index conflict.
Will the blur block clicks on my buttons?
It should not, as long as pointer-events: none stays on the .gradient-blur element. The skill's checklist says to keep this rule so clicks still reach the content underneath.
Does this skill work in all browsers?
The skill does not address browser compatibility. It relies on backdrop-filter and CSS mask, which older browsers may not render, so test the effect on your target browsers.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use progressive-blur if you are a front-end developer or designer who wants a polished top or bottom blur edge and quick tweaks without writing layered masks by hand. Pick something else if you need guaranteed support in older browsers, or if your page has a flat background or runs on low-end devices where heavy blur will slow things down.
Download the skill