Blur Image on Scroll

In this tutorial, you will learn how to blur an image on scroll using CSS and JavaScript. Watch the video below for a detailed tutorial.


  <div id="container">
    <img id="image" src="/image.jpg">

    window.addEventListener('scroll', function() {
      let num = (window.scrollY/window.innerHeight)*4;

      document.getElementById('image').style.webkitFilter = 'blur(' + num + 'px)'


body {
  background-color: #2e3537;
  margin: 0;
  height: 150vh;

#container {
  position: fixed;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

#container img {
  width: 400px;
  border-radius: 10px;
  margin: auto;

Image Source