Skip to content

Instantly share code, notes, and snippets.

@lforite

lforite/gist:7e8121529cfbc20e456a7af9ebfb0be8

Created January 21, 2026 08:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lforite/7e8121529cfbc20e456a7af9ebfb0be8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lforite/7e8121529cfbc20e456a7af9ebfb0be8 to your computer and use it in GitHub Desktop.
Download ZIP
Progressive blur
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Progressive Blur Proof</title>
<style>
/* Reset and Base Layout */
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden; /* Prevent scroll for this demo */
}
/*
* 1. THE CONTAINER
* Holds the image, the blur stack, and the text.
*/
.container {
position: relative;
width: 100%;
height: 100%;
<!-- background-color: #111;-->
}
/*
* 2. THE BACKGROUND IMAGE
*/
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Using a random Unsplash image for demonstration */
<!-- background-image: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?q=80&w=2613&auto=format&fit=crop');-->
background-size: cover;
background-position: center;
z-index: 0;
}
/*
* 3. THE PROGRESSIVE BLUR STACK
* This container holds the multiple blur layers.
*/
.blur-stack {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none; /* Let clicks pass through to image if needed */
}
/* Common styles for all blur layers */
.blur-stack div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*
The mask creates the gradient.
We use 'transparent' (no blur shown) to 'black' (blur shown).
*/
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
/*
* THE MAGIC: STACKING LAYERS
* We create an exponential curve.
* Layer 1 starts early with low blur.
* Layer 6 starts late with high blur.
* The combination creates a perfect gradient blur radius.
*/
.blur-stack div:nth-child(1) {
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
mask-image: linear-gradient(to bottom, transparent 0%, black 10%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%);
}
.blur-stack div:nth-child(2) {
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
mask-image: linear-gradient(to bottom, transparent 10%, black 25%);
-webkit-mask-image: linear-gradient(to bottom, transparent 10%, black 25%);
}
.blur-stack div:nth-child(3) {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
mask-image: linear-gradient(to bottom, transparent 25%, black 40%);
-webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 40%);
}
.blur-stack div:nth-child(4) {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
mask-image: linear-gradient(to bottom, transparent 40%, black 60%);
-webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 60%);
}
.blur-stack div:nth-child(5) {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
mask-image: linear-gradient(to bottom, transparent 60%, black 80%);
-webkit-mask-image: linear-gradient(to bottom, transparent 60%, black 80%);
}
.blur-stack div:nth-child(6) {
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
mask-image: linear-gradient(to bottom, transparent 80%, black 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 80%, black 100%);
}
/*
* 4. FOREGROUND CONTENT
* Text placed over the blurred area.
*/
.content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 4rem 2rem;
box-sizing: border-box;
z-index: 2;
color: white;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
h1 {
font-size: 3.5rem;
margin: 0 0 1rem 0;
font-weight: 700;
}
p {
font-size: 1.2rem;
max-width: 600px;
line-height: 1.6;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="container">
<!-- The Background -->
<div class="bg-image">
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
<!-- The Progressive Blur Mechanism -->
<div class="blur-stack">
<!-- We stack 6 layers for a smooth transition -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- The Text Content -->
<div class="content">
<h1>Progressive Blur</h1>
<p>
This effect is achieved using pure CSS.
Instead of a single blur layer, we stack 6 transparent
layers on top of each other. Each layer has an increasing
blur radius and a gradient mask that starts slightly lower
down the page.
</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment