What problem does it solve? A single CSS blur cannot fade smoothly from an edge of the viewport, so designers end up with harsh blur boundaries or heavy image-based workarounds. This Skill provides ready-to-use HTML and CSS that stacks multiple backdrop-filter layers with gradient masks to produce a soft, stepped progressive blur from the top or bottom of the screen. ## Core Features & Use Cases - Top and bottom variants: Provides complete copy-paste snippets for a blur that fades in from either the top or bottom edge of the viewport. - Layered mask technique: Uses six div layers plus ::before and ::after pseudo-elements with increasing blur values (0.5px to 64px) and linear-gradient masks for smooth depth transitions. - Customization guidance: Documents how to adjust direction, height, blur strength, and layer count, plus common pitfalls like pointer-events and GPU cost. - Use Case: You are building a landing page with a fixed header and want content scrolling underneath to blur softly near the top edge. Paste the top-blur snippet, set the height, and adjust the z-index to sit below your modals. ## Quick Start Ask the assistant to add a progressive blur overlay to the top of your page and specify the desired height and blur intensity.
