| name | progressive-blur |
| description | 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. |
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);
-webkit-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%);
: (to top,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
-webkit-: (to top,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
: (to top,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
-webkit-: (to top,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
: (to top,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
-webkit-: (to top,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
: (to top,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
-webkit-: (to top,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
: (to top,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
-webkit-: (to top,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
: (to top,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
-webkit-: (to top,
(, , , ) ,
(, , , ) ,
(, , , ) );
: (to top,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
{
: ;
: ;
: ();
-webkit-: (to top,
(, , , ) ,
(, , , ) );
: (to top,
(, , , ) ,
(, , , ) );
}
</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: ();
-webkit-: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
-webkit-: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
-webkit-: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
-webkit-: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
-webkit-: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
-webkit-: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
-webkit-: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) );
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
{
: ;
: ;
: ();
-webkit-: (to bottom,
(, , , ) ,
(, , , ) );
: (to bottom,
(, , , ) ,
(, , , ) );
}
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?
