What is the progressive-blur skill?
progressive-blur is a skill in boraoztunc/skills that builds a stepped blur overlay from multiple backdrop-filter layers, fading from the top or bottom of the viewport. It covers placement, height and z-index choices, flags that backdrop-filter needs real content behind it, and warns that high blur values are GPU heavy on weaker devices.
progressive-blur is one skill in boraoztunc/skills. It builds a stepped CSS blur that fades in from one edge of the viewport, using several stacked backdrop-filter layers instead of one flat blur value.
The skill first confirms placement, either from the top or bottom, along with the height and z-index the overlay needs relative to the rest of the page, before it hands over a matching code pattern.
What changes in the agent's output
- The agent places the blur element near the top of the markup so it sits correctly against the content behind it.
- Blur strength increases gradually across several layered steps instead of jumping straight to one heavy blur value.
- pointer-events stays set to none on the overlay so it never blocks clicks on the content underneath.
- Blur step count drops on request when a project needs to protect frame rate on weaker devices.
Common pitfalls it flags
backdrop-filter only blurs whatever sits behind the element, so it does nothing over a flat, empty background. High blur values are also GPU heavy, and the skill calls for fewer steps on lower-end devices rather than one maximum-strength layer.
Who the progressive-blur skill is for
Best for
- Headers or footers that need content to fade under a blur as it scrolls past.
- Pages with a fixed nav bar that needs separation from scrolling content below it.
- Any surface where a hard blur edge looks more abrupt than a gradual one.
Not for
- If your job is mostly setting up fluid layouts with container queries rather than a blur overlay, the responsive design skill is the better fit for that.
- If your job is mostly adapting a palette to dark surfaces rather than a blur gradient, the dark-mode-design skill is the better fit for that.
- When the task is naming and tiering design tokens rather than tuning a blur overlay, the design-token skill is the better fit for that.
Use it with UiChemy
A progressive blur is a finishing touch on an existing page, not a layout system. Once it is tuned, UiChemy AI to WordPress carries the resulting front-end build into an editable WordPress page.
How to install Progressive Blur Skill for AI Coding Agents
mkdir -p ~/.claude/skills/progressive-blur && curl -o ~/.claude/skills/progressive-blur/SKILL.md https://raw.githubusercontent.com/boraoztunc/skills/main/progressive-blur/SKILL.mdCreate the skill path
Run
mkdir -p ~/.claude/skills/progressive-blurto make a place for SKILL.md.Download the SKILL.md
Run the curl command above to copy progressive-blur's SKILL.md from boraoztunc/skills into that path.
Or clone the whole set
Run
git clone https://github.com/boraoztunc/skills.gitand symlink progressive-blur into ~/.claude/skills for the full collection.
Check that it loaded
Ask the agent for a fading blur at the top of a scrolling page and check that the output stacks several backdrop-filter layers with increasing blur rather than one flat value.
Key features
- Stepped backdrop-filter layersMultiple absolutely positioned layers with increasing blur values stack on top of each other to fade the blur in gradually rather than snapping to full strength.
- Top or bottom placementThe pattern ships in both a top-anchored and a bottom-anchored version, chosen by where content needs to fade under the overlay.
- Height and z-index guidanceThe skill asks for the overlay height and its z-index relative to other UI before handing back code, so it layers correctly against headers, nav bars and modals.
- GPU cost warningHigh blur values are flagged as GPU heavy, with a direct recommendation to cut the number of layered steps on lower-end devices.
- Backdrop requirement checkA reminder that backdrop-filter blurs whatever sits behind the element, so the pattern only works with real content underneath, not a flat empty background.
- Click-through safetypointer-events: none on the overlay keeps it from intercepting clicks or taps meant for the content behind it.
- Tunable customization knobsDirection, height, blur strength and step count are each called out as single values to adjust rather than requiring a rewrite of the pattern.
Frequently asked questions
What is the progressive-blur skill?
It is a skill in boraoztunc/skills that builds a stepped CSS blur fading in from the top or bottom of the viewport, using several stacked backdrop-filter layers with increasing strength instead of one flat blur value.
How do I install the progressive-blur skill?
Download its SKILL.md into a local skills path with curl, or clone the full boraoztunc/skills repository and symlink progressive-blur into your agent's skills setup. Both routes work without a package manager or build step.
Why does backdrop-filter sometimes do nothing in a progressive blur?
backdrop-filter blurs whatever sits behind the element it is applied to. Over a flat, empty background there is nothing to blur, so the overlay has to sit above real content for the effect to show at all.
How many layers does a progressive blur need?
The skill uses several stacked layers with increasing blur strength to fade the effect in gradually. Fewer steps keep the effect lighter for lower-end devices, while more steps give a smoother transition on faster hardware.
Does a progressive blur block clicks on the content behind it?
No, as long as pointer-events is set to none on the overlay. That keeps the blur purely visual, so clicks and taps still reach whatever sits underneath the layered blur element.
Can a progressive blur fade in from the bottom instead of the top?
Yes. The skill provides both a top-anchored and a bottom-anchored version of the same stacked-layer pattern, chosen by flipping the gradient direction and adjusting which edge the overlay is pinned to.
Is a progressive blur expensive for performance?
High blur values are GPU heavy, especially with many stacked layers. The skill recommends reducing the number of blur steps on lower-end devices rather than keeping every layer at full strength regardless of hardware.