Add a background blur that grows stronger toward the top or bottom of a webpage. Layered CSS masks control the transition, with snippets and guidance for adjusting height, blur strength, stacking order, and rendering cost.
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.
Review the instructions the agent will receive before you install.
<body>..gradient-blur element near the top of the DOM.z-index to sit above content but below modals.<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>
<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>
to top ↔ to bottom..gradient-blur height percentage.backdrop-filter needs content behind it; it will not blur a flat background.pointer-events: none stays to avoid blocking clicks.No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Build woven fabric in Three.js with visible threads, realistic sheen, seams, and thick hems. The skill covers folds that preserve texture proportions, light passing through thin cloth, and variations in dye and wear.
Build falling leaves in Three.js and similar 3D scenes, with visible front, edge, and back views as they tumble and drift. Coordinate wind, scene depth, camera-aware recycling, and performance checks for a convincing autumn effect.
Add coordinated seasonal transitions to an existing 3D scene. Blend foliage, lighting, sky, ground, snow, and particles from one shared state while preserving camera controls and interactions, so the same place remains recognizable throughout spring, summer, fall, and winter.
Create or integrate detailed 3D models with smooth outlines and believable edges for close-up views. Prepare lower-detail versions for distant viewing, prioritize loading, and measure rendering costs in the actual scene.
Prepare detailed 3D materials that remain clear in close-up views. The skill guides texture resolution, physically based material maps, surface mapping, filtering, and progressive loading while checking download size and GPU memory use.
Create realistic metal surfaces in Three.js by combining structured reflections, studio lighting, scratches, fingerprints, and beveled edges. Includes polished, brushed, and aged finishes for objects such as tools, rings, and metal product parts.