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---5
6# Progressive Blur Skill
7
8## Workflow
91. 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).
12
13## Usage checklist
14- 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.
18
19## Top blur (from top)
20```html
21<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 }
32
33 .gradient-blur > div,
34 .gradient-blur::before,
35 .gradient-blur::after {
36 position: absolute;
37 inset: 0;
38 }
39
40 .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 }
50
51 .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 }
60
61 .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 }
70
71 .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 }
80
81 .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 }
90
91 .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 }
100
101 .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 }
109
110 .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```
120
121## Bottom blur (from bottom)
122```html
123<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 }
134
135 .gradient-blur > div,
136 .gradient-blur::before,
137 .gradient-blur::after {
138 position: absolute;
139 inset: 0;
140 }
141
142 .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 }
152
153 .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 }
162
163 .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 }
172
173 .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 }
182
183 .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 }
192
193 .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 }
202
203 .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 }
211
212 .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```
222
223## Customization knobs
224- 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.
228
229## Common pitfalls
230- `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.
233
234## Questions to ask when specs are missing
235- 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?
gabrielmoreira