1. Tutorials
  2. CSS
  3. Color Overlay Scroll

Color Overlay Scroll

In this tutorial, you will learn to apply a color overlay with CSS that fades on page scroll down. Watch the video below for a detailed tutorial.

HTML

<body>
    <div class="container"></div>
</body>

CSS

body {
	margin: 0;
	height: 1500px;
	background-image: url('https://images.unsplash.com/photo-1564227230898-87086d5b04dc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1112&q=80');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
}
.container {
	height: 100%;
	background: linear-gradient(#3b8dcf, transparent 80%);
	mix-blend-mode: difference;
}