Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Progressive Blur Skill · mengto | DecimalAI

mengto/progressive-blur

SkillScore95Maintained

Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness. Use when asked for “progressive blur”, “gradient blur overlay”, or stepped blur masks that fade from an edge of the viewport.

Frontendby mengto

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/mengto-progressive-blur/SKILL.md

decimalai skills pull mengto-progressive-blur --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/mengto-progressive-blur/SKILL.md https://app.decimal.ai/s/mengto-progressive-blur/SKILL.md

Raw file: /s/mengto-progressive-blur/SKILL.md ↗ · machine-readable summary at /s/mengto-progressive-blur.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 49d ago

Yes — +32% lift · at higher cost+82% tokens0% turns95% of whole cases pass with skill (21/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-01	✗→✓	▲ Improved	25%	0%
case-02	✗→✓	▲ Improved	67%	0%
case-04	✗→✓	▲ Improved	101%	0%
case-05	✗→✓	▲ Improved	118%	0%
case-13	✗→✓	▲ Improved	99%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

mengto / skills

agent-skills/web-design/progressive-blur/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

Skill contents

SKILL.md

Progressive Blur Skill

Workflow

Confirm placement (top or bottom), height, and z-index relative to UI.
Provide the matching snippet and a short usage checklist.
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)

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

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

Illustrative Want to see what mengto/progressive-blur would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/10/2026, 09:25 UTC · 22 cases

Lift

+32%

95% vs 64%

Agent turns

1.0 vs 1.0

Tokens

+82%

4,112.32 vs 2,257.45

fail → pass · 7pass → pass · 14fail → fail · 1

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I'm building a navigation header for my website and want a smooth progressive blur overlay fixed along the top edge of the screen. Can you provide the necessary HTML and CSS snippet along with a brief usage checklist covering DOM placement and positioning guidelines?	fail→pass	16,058	8,101	-50%	1	1	0%	3,521	4,412	+25%	0	0	—
case-02 I need a visual gradient blur at the bottom of my web application to fade out content under a fixed footer. Please generate the code snippet for this bottom overlay and include setup instructions for layout integration.	fail→pass	13,066	7,920	-39%	1	1	0%	2,658	4,437	+67%	0	0	—
case-03 Can you share the HTML and CSS markup for creating a progressive backdrop blur element on a webpage, along with guidelines for integrating it into the DOM and tuning its height or direction?	fail→fail	13,681	12,662	-7%	1	1	0%	2,730	5,849	+114%	0	0	—
case-04 I want to add a top blur effect to my web header using pure CSS. Should I just use a single div with a linear-gradient mask image on backdrop-filter: blur(20px), or is there a standard multi-layer technique for progressive blur?	fail→pass	12,238	9,895	-19%	1	1	0%	2,377	4,788	+101%	0	0	—
case-05 I am adding a sticky bottom overlay to my mobile web app to create a soft blur behind the navigation bar. What HTML structure and CSS should I use if I want a bottom-anchored 65% height overlay?	fail→pass	11,454	10,285	-10%	1	1	0%	2,397	5,223	+118%	0	0	—
case-06 When placing a fixed gradient blur container over interactive web page content, users are unable to click links underneath the blur area. How should pointer interactions be configured on the overlay element?	pass→pass	7,447	7,406	-1%	1	1	0%	1,586	4,312	+172%	0	0	—
case-07 My progressive blur effect is causing severe frame drops on lower-end mobile devices. How can I optimize this multi-layer backdrop-filter setup while preserving the visual effect?	pass→pass	16,455	12,220	-26%	1	1	0%	3,117	5,154	+65%	0	0	—
case-08 I added the gradient blur overlay div directly over a solid flat body background, but no blur effect is visible at all. What is required for backdrop-filter to work?	pass→pass	9,021	5,793	-36%	1	1	0%	1,671	3,439	+106%	0	0	—
case-09 How do I switch a vertical progressive blur snippet to create a blur that fades horizontally from left to right?	pass→pass	7,948	9,563	+20%	1	1	0%	1,592	4,847	+204%	0	0	—
case-10 I need a progressive blur where the maximum blur depth stops at 16px instead of 64px. Which CSS property values across the layers need adjustment?	pass→pass	11,243	8,674	-23%	1	1	0%	2,611	4,684	+79%	0	0	—
case-11 Where should the z-index of a fixed progressive blur overlay sit relative to main page content and modal dialogs?	pass→pass	11,161	4,480	-60%	1	1	0%	2,119	3,329	+57%	0	0	—
case-12 I want to generate a progressive blur effect for my web application, but I haven't decided on the exact dimensions or orientation yet. What parameters need to be clarified?	pass→pass	10,599	5,083	-52%	1	1	0%	1,951	3,470	+78%	0	0	—
case-13 What default z-index and inset values are standard for a top fixed progressive blur overlay?	fail→pass	11,052	7,256	-34%	1	1	0%	2,191	4,363	+99%	0	0	—
case-14 In a multi-step progressive blur implementation using HTML and CSS, what backdrop blur values are assigned to the ::before and ::after pseudo-elements?	fail→pass	9,440	3,640	-61%	1	1	0%	1,948	3,295	+69%	0	0	—
case-15 What backdrop-filter blur radius is assigned to the first inner child div in the progressive blur layer sequence?	pass→pass	7,119	2,337	-67%	1	1	0%	1,420	2,975	+110%	0	0	—
case-16 What backdrop-filter blur radius is assigned to the fifth inner child div in the progressive blur layer sequence?	pass→pass	8,612	2,148	-75%	1	1	0%	1,963	3,003	+53%	0	0	—
case-17 For the second child div in a top progressive blur overlay, what linear gradient mask percentage stops are applied across its range?	fail→pass	13,610	3,637	-73%	1	1	0%	2,768	3,378	+22%	0	0	—
case-18 Where inside the HTML document hierarchy should the gradient blur container element be inserted for reliable rendering?	pass→pass	11,458	3,618	-68%	1	1	0%	2,063	3,204	+55%	0	0	—
case-19 How do I create an animated glowing outer border around a button using CSS box-shadow and keyframe animations?	pass→pass	11,283	7,642	-32%	1	1	0%	2,383	4,092	+72%	0	0	—
case-20 How can I fade the edges of a standard img tag to transparent using CSS mask-image without blurring the background?	pass→pass	10,934	6,399	-41%	1	1	0%	2,065	3,750	+82%	0	0	—
case-21 How do I change a navigation bar background color opacity dynamically on scroll using JavaScript intersection observers?	pass→pass	12,601	9,788	-22%	1	1	0%	2,675	4,516	+69%	0	0	—
case-22 How do I style a simple UI card container with a uniform translucent background and backdrop blur effect?	pass→pass	8,877	6,552	-26%	1	1	0%	1,858	3,951	+113%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +32 percentage points is the difference between those two pass rates over the 22 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 63.6%
Pass rate with the skill: 95.5%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 0
Skill version measured: v1
Run completed: 8/10/2026, 09:25 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-01

Prompt

I'm building a navigation header for my website and want a smooth progressive blur overlay fixed along the top edge of the screen. Can you provide the necessary HTML and CSS snippet along with a brief usage checklist covering DOM placement and positioning guidelines?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run95

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+88% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 48 days ago

Other measured skills in the registry, with their headline benchmark lift.