Progressive Blur Generator

For you, who want that fancy new progressive blur effect on your website.

Controls

Preview

Preview Area

Start scrolling

Et qui do anim enim et cillum sunt sunt Adipha consequat. Non dolor qui irure nostrud veniam dolore eiusmod occaecat commodo. Ea cillum dolore sunt veniam consequat Loresius mollit do cupidatat qui sunt laboris tempor. Qui et voluptate id nulla deserunt et tempor cillum et sint ex cillum Sitera. Cillum enim nisi voluptate cupidatat voluptate non fugiat ea nisi velit velit. Exercitation nulla ut sunt anim cupidatat sunt adipiscing consectetur excepteur Sitera do.

Sunt cillum sunt est deserunt officia labore ipsum ex Sitera. Amet ad et ex officia ex sed ut nulla est est. Ad fugiat incididunt occaecat Sitera aliqua incididunt dolor velit pariatur nulla do in Dolorium. Dolore id excepteur incididunt qui ipsum nisi est cillum velit fugiat sit Sitera id. Aliquip enim ea laborum nulla voluptate mollit amet Ipsumor enim.

TonniTools

Zweeep Mittens miau rrrow psp meow chirp miau mrrow mrrrrow miau nya wheep. Sneep gak knead chirrup nyuu prr mrrow mrrr miauuw Mittens gak Nyathor. Yowww mew eep reep mrow purrgle wheep yowww mlem gak mrow mrow blep prr. Mrow mrow ak mrrp psp nyuu rrrt huffff mlem gakgakgak brrrp. Mrrp nyan miauuw rrrt reep zweeep gak ak Whiskers miauuw purrgle meow mrow.

Brrrp brrrp yowww wheep mrrow mroow miau meow mrrp Meowseidon mrrrrow nya mrrp Nyathor. Ak mrrp chirp purrgle prr nyaaah miauuw grrr gak mrow chirrup gak. Gakgakgak zweeep rrrow blep ak miau nyuu prr prr ak mew gak mrow. Mlem rrrow huffff nyuu wrrr zweeep nyuu miauuw miau zweeep mrrow.

HTML

<div class="progressiveBlur">
  <div /><div /><div /><div /><div /><div /><div />
</div>

CSS

.progressiveBlur {
  width: 100%;
  position: sticky;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  margin-bottom: -100px;
}

.progressiveBlur > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.progressiveBlur > div:nth-child(1) {
  z-index: 11;
  backdrop-filter: blur(0.50px);
  mask: linear-gradient(to bottom, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
}
.progressiveBlur > div:nth-child(2) {
  z-index: 10;
  backdrop-filter: blur(1.00px);
  mask: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 95%);
}
.progressiveBlur > div:nth-child(3) {
  z-index: 10;
  backdrop-filter: blur(2.00px);
  mask: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}
.progressiveBlur > div:nth-child(4) {
  z-index: 9;
  backdrop-filter: blur(4.00px);
  mask: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 80%);
}
.progressiveBlur > div:nth-child(5) {
  z-index: 8;
  backdrop-filter: blur(8.00px);
  mask: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 60%);
}
.progressiveBlur > div:nth-child(6) {
  z-index: 7;
  backdrop-filter: blur(16.00px);
  mask: linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 40%);
}
.progressiveBlur > div:nth-child(7) {
  z-index: 6;
  backdrop-filter: blur(32.00px);
  mask: linear-gradient(to bottom, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 20%);
}