Solution 1 :

Try to use this using template string: = `blur(${(height - scrollTop) / height}px)`;


window.onscroll = function() {
  var target = document.getElementById("text");
  var height = window.innerHeight;
  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  // Change this if you want it to fade faster
  height = height / 1;
  // = 'blur(' + (height - scrollTop) / height + 'px)'; = `blur(${(height - scrollTop) / height}px)`;
@font-face {
  font-family: Akz;
  src: url("fonts/AkzidenzGrotesk-Regular.otf");

* {
  padding: 0;
  margin: 0;

#text {
  font-family: Akz;
  font-size: 2em;
  line-height: 1.3em;
  height: 100vh;
  filter: blur(0px);

.header {
  height: 100vh;

.footer {
  height: 100vh;
<div class="header">


<div id="text">
    Litteris quem illum deserunt quid. Quis si iis dolor appellat sed et incurreret graviterque. Expetendis familiaritatem est deserunt, malis possumus admodum, quae philosophari litteris dolore voluptate, quae eiusmod e veniam sunt an se admodum e mandaremus,
    si aliqua ab ipsum do lorem non id dolore litteris, quis relinqueret deserunt quorum cupidatat.

<div class="footer">


Problem :

I am trying to change the css blur filter. I am able to change it to a single value however i would like to change it dynamically so that as you scroll up more blur is added.

i assume this can be done with a line of code such as

blur((height - scrollTop) / height + px);

I cannot seem to get this to work.