Progressive Blur — Agent Skill by Meng To

From the author

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.

— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to creating gradient blur overlays in CSS. By layering multiple elements with varying backdrop-filter intensities and mask gradients, it achieves a smooth, professional fade effect at the edges of a viewport. The implementation is designed to be flexible, allowing developers to easily adjust the direction, height, and intensity of the blur to suit specific UI requirements.

What it does

Generates CSS code for top or bottom-aligned progressive blur overlays.
Uses layered backdrop-filter properties to create a smooth transition.
Provides a modular HTML structure for easy integration into existing projects.
Offers customization knobs for blur strength, height, and gradient direction.
Includes a usage checklist to ensure correct DOM placement and z-index management.

When to use it

When you need a gradient blur overlay that fades content at the edge of the screen.
When implementing UI components that require depth and softness.
When you need to ensure content remains readable behind a blurred overlay.
When you want a performant, CSS-only solution for progressive blurring.

Advantages

Pure CSS implementation avoids heavy JavaScript dependencies.
Highly customizable via simple CSS property adjustments.
Layered approach creates a more natural, smooth blur effect than single-filter methods.
Includes built-in performance considerations for low-end devices.

Usage examples

“Create a progressive blur at the top of my page.”: The agent will provide the HTML and CSS snippet configured for a top-aligned gradient blur, along with instructions on where to place it in the DOM.
“How can I make my bottom blur effect taller?”: The agent will explain how to adjust the height percentage on the .gradient-blur class to increase the vertical span of the blur.

Install

Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/mengto/progressive-blur/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip progressive-blur.zip -d .agents/skills

Documentation by Meng To

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)

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

Files

ATTRIBUTION.mdAdded by AutoGineer854 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md5.9 KiB
demo/PROMPT.md2.9 KiB
demo/assets/page-01-724142aa-44a6-48d3-9cf3-761e00d05b78-1600w.jpg966.2 KiB
demo/assets/page-02-0d868fef-f560-45ca-ab35-5dad4fc29059-3840w.webp276.2 KiB
demo/assets/page-03-005600e5-f6ab-4e59-bc86-eaeb02797dfa-1600w.jpg711.5 KiB
demo/assets/page-04-3186f9ea-5f5a-49f7-8fcf-568ad52f515e-3840w.webp585.3 KiB
demo/assets/page-05-7f78131e-65e9-49b2-aa1f-ccc33e28df9f-1600w.webp153.9 KiB
demo/assets/page-06-4f5668c5-fc4a-44e0-bc5e-a664189d3c31-1600w.jpg212.3 KiB
demo/assets/page-07-d14dc069-558a-4c51-8aad-5cc237f9b61d-1600w.jpg64.5 KiB
demo/assets/page-08-eca707cc-a5b7-439a-b4fd-247f6106c2e1-1600w.jpg243.8 KiB
demo/assets/page-09-4734259a-bad7-422f-981e-ce01e79184f2-1600w.jpg43.7 KiB
demo/assets/page-10-77415a2e-dcbc-4748-a29d-fced4821881a-1600w.jpg354.2 KiB
demo/assets/page-11-5ee0a38a-b5d3-4531-8793-98beed4af162-1600w.jpg519.5 KiB
demo/assets/page-12-65695f80-23f9-46ee-8487-cbb6c93cc48b-3840w.webp523.8 KiB
demo/assets/page-13-fb6415fd-bf4d-4ccf-8e9d-7ab445e99207-1600w.jpg197.2 KiB
demo/assets/page-14-c92852bb-a510-405a-85ab-ffa0fde136a4-1600w.jpg209.1 KiB
demo/assets/page-15-e534354d-c5f2-4399-a1d9-2f50338e8c47-1600w.jpg83.3 KiB
demo/assets/page-16-2f563338-39fa-47ea-9761-658d4f3f84db-1600w.jpg292.0 KiB
demo/assets/source-preview.jpg68.5 KiB
demo/index.html41.2 KiB
demo/preview.jpg45.3 KiB
demo/source.json6.9 KiB

demo/assets/source-preview.jpg

This is a binary file; download the ZIP to get it.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

What our scanner noticed· Medium risk

Large base64-encoded blobs

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Web Artifacts Builder
AnthropicOfficial
A structured workflow for developing and bundling complex, multi-component React artifacts for Claude.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0Medium riskHas scriptsGitHub stars of the source repository188.6k
Frontend UI Engineering
Addy Osmani· Community
Engineering standards for building accessible, responsive, and production-ready frontend user interfaces.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository113.9k
Ask Sonner
Emil Kowalski· Community
A comprehensive guide for implementing, styling, and troubleshooting the Sonner toast notification library in React applications.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Pick UI Library
Emil Kowalski· Community
Get recommendations for frontend UI libraries based on a curated, opinionated list.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Animate Expo
Emil Kowalski· Community
A senior mobile engineering guide for building React Native and Expo animations that feel correct on real devices.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Prototype
Emil Kowalski· Community
A design engineering workflow for building and comparing distinct UI variants using an isolated picker harness.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download progressive-blur.zip