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?
1---2name: progressive-blur3description: 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.4---56# Progressive Blur Skill78## Workflow91. Confirm placement (top or bottom), height, and z-index relative to UI.102. Provide the matching snippet and a short usage checklist.113. Offer only targeted tweaks (height, blur steps, direction, opacity stops).1213## Usage checklist14- Insert the HTML inside `<body>`.15- Keep the `.gradient-blur` element near the top of the DOM.16- Ensure the background behind it exists (backdrop-filter blurs what is behind).17- Adjust `z-index` to sit above content but below modals.1819## Top blur (from top)20```html21<div class="gradient-blur">22 <div></div><div></div><div></div><div></div><div></div><div></div>23</div>24<style>25 .gradient-blur {26 position: fixed;27 z-index: 5;28 inset: 0 0 auto 0;29 height: 12%;30 pointer-events: none;31 }3233 .gradient-blur > div,34 .gradient-blur::before,35 .gradient-blur::after {36 position: absolute;37 inset: 0;38 }3940 .gradient-blur::before {41 content: "";42 z-index: 1;43 backdrop-filter: blur(0.5px);44 mask: linear-gradient(to top,45 rgba(0, 0, 0, 0) 0%,46 rgba(0, 0, 0, 1) 12.5%,47 rgba(0, 0, 0, 1) 25%,48 rgba(0, 0, 0, 0) 37.5%);49 }5051 .gradient-blur > div:nth-of-type(1) {52 z-index: 2;53 backdrop-filter: blur(1px);54 mask: linear-gradient(to top,55 rgba(0, 0, 0, 0) 12.5%,56 rgba(0, 0, 0, 1) 25%,57 rgba(0, 0, 0, 1) 37.5%,58 rgba(0, 0, 0, 0) 50%);59 }6061 .gradient-blur > div:nth-of-type(2) {62 z-index: 3;63 backdrop-filter: blur(2px);64 mask: linear-gradient(to top,65 rgba(0, 0, 0, 0) 25%,66 rgba(0, 0, 0, 1) 37.5%,67 rgba(0, 0, 0, 1) 50%,68 rgba(0, 0, 0, 0) 62.5%);69 }7071 .gradient-blur > div:nth-of-type(3) {72 z-index: 4;73 backdrop-filter: blur(4px);74 mask: linear-gradient(to top,75 rgba(0, 0, 0, 0) 37.5%,76 rgba(0, 0, 0, 1) 50%,77 rgba(0, 0, 0, 1) 62.5%,78 rgba(0, 0, 0, 0) 75%);79 }8081 .gradient-blur > div:nth-of-type(4) {82 z-index: 5;83 backdrop-filter: blur(8px);84 mask: linear-gradient(to top,85 rgba(0, 0, 0, 0) 50%,86 rgba(0, 0, 0, 1) 62.5%,87 rgba(0, 0, 0, 1) 75%,88 rgba(0, 0, 0, 0) 87.5%);89 }9091 .gradient-blur > div:nth-of-type(5) {92 z-index: 6;93 backdrop-filter: blur(16px);94 mask: linear-gradient(to top,95 rgba(0, 0, 0, 0) 62.5%,96 rgba(0, 0, 0, 1) 75%,97 rgba(0, 0, 0, 1) 87.5%,98 rgba(0, 0, 0, 0) 100%);99 }100101 .gradient-blur > div:nth-of-type(6) {102 z-index: 7;103 backdrop-filter: blur(32px);104 mask: linear-gradient(to top,105 rgba(0, 0, 0, 0) 75%,106 rgba(0, 0, 0, 1) 87.5%,107 rgba(0, 0, 0, 1) 100%);108 }109110 .gradient-blur::after {111 content: "";112 z-index: 8;113 backdrop-filter: blur(64px);114 mask: linear-gradient(to top,115 rgba(0, 0, 0, 0) 87.5%,116 rgba(0, 0, 0, 1) 100%);117 }118</style>119```120121## Bottom blur (from bottom)122```html123<div class="gradient-blur">124 <div></div><div></div><div></div><div></div><div></div><div></div>125</div>126<style>127 .gradient-blur {128 position: fixed;129 z-index: 5;130 inset: auto 0 0 0;131 height: 65%;132 pointer-events: none;133 }134135 .gradient-blur > div,136 .gradient-blur::before,137 .gradient-blur::after {138 position: absolute;139 inset: 0;140 }141142 .gradient-blur::before {143 content: "";144 z-index: 1;145 backdrop-filter: blur(0.5px);146 mask: linear-gradient(to bottom,147 rgba(0, 0, 0, 0) 0%,148 rgba(0, 0, 0, 1) 12.5%,149 rgba(0, 0, 0, 1) 25%,150 rgba(0, 0, 0, 0) 37.5%);151 }152153 .gradient-blur > div:nth-of-type(1) {154 z-index: 2;155 backdrop-filter: blur(1px);156 mask: linear-gradient(to bottom,157 rgba(0, 0, 0, 0) 12.5%,158 rgba(0, 0, 0, 1) 25%,159 rgba(0, 0, 0, 1) 37.5%,160 rgba(0, 0, 0, 0) 50%);161 }162163 .gradient-blur > div:nth-of-type(2) {164 z-index: 3;165 backdrop-filter: blur(2px);166 mask: linear-gradient(to bottom,167 rgba(0, 0, 0, 0) 25%,168 rgba(0, 0, 0, 1) 37.5%,169 rgba(0, 0, 0, 1) 50%,170 rgba(0, 0, 0, 0) 62.5%);171 }172173 .gradient-blur > div:nth-of-type(3) {174 z-index: 4;175 backdrop-filter: blur(4px);176 mask: linear-gradient(to bottom,177 rgba(0, 0, 0, 0) 37.5%,178 rgba(0, 0, 0, 1) 50%,179 rgba(0, 0, 0, 1) 62.5%,180 rgba(0, 0, 0, 0) 75%);181 }182183 .gradient-blur > div:nth-of-type(4) {184 z-index: 5;185 backdrop-filter: blur(8px);186 mask: linear-gradient(to bottom,187 rgba(0, 0, 0, 0) 50%,188 rgba(0, 0, 0, 1) 62.5%,189 rgba(0, 0, 0, 1) 75%,190 rgba(0, 0, 0, 0) 87.5%);191 }192193 .gradient-blur > div:nth-of-type(5) {194 z-index: 6;195 backdrop-filter: blur(16px);196 mask: linear-gradient(to bottom,197 rgba(0, 0, 0, 0) 62.5%,198 rgba(0, 0, 0, 1) 75%,199 rgba(0, 0, 0, 1) 87.5%,200 rgba(0, 0, 0, 0) 100%);201 }202203 .gradient-blur > div:nth-of-type(6) {204 z-index: 7;205 backdrop-filter: blur(32px);206 mask: linear-gradient(to bottom,207 rgba(0, 0, 0, 0) 75%,208 rgba(0, 0, 0, 1) 87.5%,209 rgba(0, 0, 0, 1) 100%);210 }211212 .gradient-blur::after {213 content: "";214 z-index: 8;215 backdrop-filter: blur(64px);216 mask: linear-gradient(to bottom,217 rgba(0, 0, 0, 0) 87.5%,218 rgba(0, 0, 0, 1) 100%);219 }220</style>221```222223## Customization knobs224- Direction: flip `to top` ↔ `to bottom`.225- Height: adjust `.gradient-blur` height percentage.226- Strength: change blur values (0.5px → 64px).227- Steps: add/remove layers to control smoothness.228229## Common pitfalls230- `backdrop-filter` needs content behind it; it will not blur a flat background.231- High blur values are GPU-heavy; reduce steps on low-end devices.232- Ensure `pointer-events: none` stays to avoid blocking clicks.233234## Questions to ask when specs are missing235- Should the blur start from the top or bottom?236- How tall should the blur area be?237- Is performance a concern on lower-end devices?
Meng To