Progressive Blur

Meng ToCommunityCreated by Meng To

Skill
Tool integration
Software development
MIT
Medium risk

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/source.json

{
  "version": 1,
  "provider": "Neuform",
  "synced_at": "2026-07-18T06:41:06.388Z",
  "skill": {
    "id": "progressive-blur",
    "label": "Progressive Blur",
    "usage_count": 211,
    "url": "https://neuform.ai/skill/progressive-blur"
  },
  "ranking": {
    "position": 1,
    "order": [
      "view_count desc",
      "community_favorite_count desc",
      "relation_created_at desc"
    ],
    "visible_design_count": 1
  },
  "design": {
    "id": "94c796be-3463-454a-9135-4dbe0114813f",
    "slug": "golabs-performance-hydration-collection",
    "title": "GOLABS | Performance Hydration Collection",
    "url": "https://neuform.ai/pages/golabs-performance-hydration-collection/index.html",
    "view_count": 381,
    "favorite_count": 32,
    "remix_count": 2
  },
  "html": {
    "original_sha256": "7509fa496c987f69ee615b6fd570a25024d5df1f8d25262131096549407fd277",
    "bundled_sha256": "88d80a958488940b671e8de4466320bc95d9775d93dfe577c6eed12b53fffa06",
    "runtime_dependencies": [],
    "hardened_sha256": "f4323571cf8a6f603904ed84946baccdc804368ea9209202310859bbfb1a0ea4",
    "sandboxed_sha256": "a3c5deb392374e06f44ba2c511202e0d66ad962e3afa88801b02ce164d869b02",
    "security_profile": "sandboxed-srcdoc-v1"
  },
  "assets": {
    "preview": "assets/source-preview.jpg",
    "bundled": [
      {
        "bytes": 989406,
        "file": "assets/page-01-724142aa-44a6-48d3-9cf3-761e00d05b78-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/724142aa-44a6-48d3-9cf3-761e00d05b78_1600w.jpg"
      },
      {
        "bytes": 282854,
        "file": "assets/page-02-0d868fef-f560-45ca-ab35-5dad4fc29059-3840w.webp",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/0d868fef-f560-45ca-ab35-5dad4fc29059_3840w.webp"
      },
      {
        "bytes": 728581,
        "file": "assets/page-03-005600e5-f6ab-4e59-bc86-eaeb02797dfa-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/005600e5-f6ab-4e59-bc86-eaeb02797dfa_1600w.jpg"
      },
      {
        "bytes": 599390,
        "file": "assets/page-04-3186f9ea-5f5a-49f7-8fcf-568ad52f515e-3840w.webp",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3186f9ea-5f5a-49f7-8fcf-568ad52f515e_3840w.webp"
      },
      {
        "bytes": 157556,
        "file": "assets/page-05-7f78131e-65e9-49b2-aa1f-ccc33e28df9f-1600w.webp",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7f78131e-65e9-49b2-aa1f-ccc33e28df9f_1600w.webp"
      },
      {
        "bytes": 217369,
        "file": "assets/page-06-4f5668c5-fc4a-44e0-bc5e-a664189d3c31-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4f5668c5-fc4a-44e0-bc5e-a664189d3c31_1600w.jpg"
      },
      {
        "bytes": 66005,
        "file": "assets/page-07-d14dc069-558a-4c51-8aad-5cc237f9b61d-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d14dc069-558a-4c51-8aad-5cc237f9b61d_1600w.jpg"
      },
      {
        "bytes": 249675,
        "file": "assets/page-08-eca707cc-a5b7-439a-b4fd-247f6106c2e1-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/eca707cc-a5b7-439a-b4fd-247f6106c2e1_1600w.jpg"
      },
      {
        "bytes": 44753,
        "file": "assets/page-09-4734259a-bad7-422f-981e-ce01e79184f2-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4734259a-bad7-422f-981e-ce01e79184f2_1600w.jpg"
      },
      {
        "bytes": 362749,
        "file": "assets/page-10-77415a2e-dcbc-4748-a29d-fced4821881a-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/77415a2e-dcbc-4748-a29d-fced4821881a_1600w.jpg"
      },
      {
        "bytes": 531939,
        "file": "assets/page-11-5ee0a38a-b5d3-4531-8793-98beed4af162-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5ee0a38a-b5d3-4531-8793-98beed4af162_1600w.jpg"
      },
      {
        "bytes": 536390,
        "file": "assets/page-12-65695f80-23f9-46ee-8487-cbb6c93cc48b-3840w.webp",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/65695f80-23f9-46ee-8487-cbb6c93cc48b_3840w.webp"
      },
      {
        "bytes": 201962,
        "file": "assets/page-13-fb6415fd-bf4d-4ccf-8e9d-7ab445e99207-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fb6415fd-bf4d-4ccf-8e9d-7ab445e99207_1600w.jpg"
      },
      {
        "bytes": 214106,
        "file": "assets/page-14-c92852bb-a510-405a-85ab-ffa0fde136a4-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c92852bb-a510-405a-85ab-ffa0fde136a4_1600w.jpg"
      },
      {
        "bytes": 85289,
        "file": "assets/page-15-e534354d-c5f2-4399-a1d9-2f50338e8c47-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e534354d-c5f2-4399-a1d9-2f50338e8c47_1600w.jpg"
      },
      {
        "bytes": 298959,
        "file": "assets/page-16-2f563338-39fa-47ea-9761-658d4f3f84db-1600w.jpg",
        "original_url": "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2f563338-39fa-47ea-9761-658d4f3f84db_1600w.jpg"
      },
      {
        "bytes": 407279,
        "file": "../../../../assets/runtime/runtime-ccc8894b3418-runtime.js",
        "original_url": "https://cdn.tailwindcss.com/",
        "kind": "runtime-script",
        "sha256": "176e894661aa9cdc9a5cba6c720044cbbf7b8bd80d1c9a142a7c24b1b6c50d15"
      },
      {
        "bytes": 42667,
        "file": "../../../../assets/runtime/runtime-689ca8dda44c-scrolltrigger-min.js",
        "original_url": "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js",
        "kind": "runtime-script",
        "sha256": "65f6c13748b0c8d8f9eabd0373a130ac293b3f16bf34aaa946d953980372b932"
      },
      {
        "bytes": 71520,
        "file": "../../../../assets/runtime/runtime-027051effa47-gsap-min.js",
        "original_url": "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js",
        "kind": "runtime-script",
        "sha256": "efc85c7eb141819717cda0033484a84b1c890d13b02e355a2fec79d424b20e7a"
      },
      {
        "bytes": 22003,
        "file": "../../../../assets/runtime/runtime-163ebd087cfc-iconify-icon-min.js",
        "original_url": "https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js",
        "kind": "runtime-script",
        "sha256": "851bed7af266f96a0be3edf9918daab48d8da4ce17c46040511bae450caf3dd6"
      }
    ],
    "skipped": []
  }
}

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.

Attribution and licence

Created by

Meng To

Publisher

Meng To (Community)

Source

MengTo/Skills · agent-skills/web-design/progressive-blur · commit 5ea1661

Licence

MIT License (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-08

AutoGineer is not affiliated with or endorsed by Meng To.

Download ZIP

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