progressive-blur

Generates layered progressive blur overlays with backdrop-filter masks for web pages.

4.5k|536|Updated Feb 3, 2026

Search Tags:#front-end #css #ui effects #backdrop-filter #mask gradients #progressive blur

Ready to run

npx skills add https://github.com/MengTo/Skills --skill progressive-blur-mengto

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: progressive-blur
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/progressive-blur
Command: npx skills add https://github.com/MengTo/Skills --skill progressive-blur-mengto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of creating a soft, depth-like “progressive blur” overlay that fades from an edge of the viewport without looking flat or abrupt.

Core Features & Use Cases

Layered stepped blur masks: Builds depth by stacking multiple blur layers with backdrop-filter and mask gradients.
Top or bottom direction: Supports progressive blur that originates from the top or from the bottom of the screen.
Practical integration guardrails: Includes checklist guidance to ensure the blur works correctly behind real page content and doesn’t block interactions.

Quick Start

Add the provided HTML structure and CSS styles to your page, then choose top or bottom direction and tune the height and blur steps if needed.

Frequently Asked Questions about progressive-blur

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a progressive blur overlay with CSS backdrop-filter?▼

You create a progressive blur overlay by stacking multiple CSS backdrop-filter layers and applying mask: linear-gradient(...) to each, fading the blur effect from the top or bottom edge of the viewport for soft depth.

Why does my backdrop-filter blur look flat instead of fading smoothly?▼

A backdrop-filter blur looks flat when applied as a single layer instead of a progressive blur. You need layered stepped blur masks using mask gradients to build depth and fade the overlay naturally from the edge.

How do I stop a fixed backdrop-filter overlay from blocking button clicks?▼

To stop a fixed backdrop-filter overlay from blocking button clicks, apply pointer-events: none to the overlay container, ensuring blur operates on content behind it without intercepting user interactions.

Can I use CSS mask gradients to fade a backdrop blur from the bottom of the screen?▼

Yes, you can fade a backdrop blur from the bottom of the screen by configuring the mask: linear-gradient(...) to originate from the bottom direction, adjusting height and blur steps for the desired atmospheric effect.

What is the best way to add a gradient blur background for web design hero headers?▼

The best way to add a gradient blur background for hero headers is using a layered CSS progressive blur overlay with multiple backdrop-filter layers and mask gradients, providing depth and background separation without flat edges.