Change Background Gradient on Scroll Using CSS

Gradients can be used to give various colourful effects to backgrounds. One such effect is changing the color of background on scrolling down.

The demo of this effect along with its code is shown below.

The Structure

Create a heading h1 containing the heading content.

HTML

<h1>Scroll down to See Gradient Change</h1>

The Styling

Style the heading and place it at the horizontal center of the screen.

CSS

/* Google font */
@import url('https://fonts.googleapis.com/css?family=Montserrat');

h1 {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
}

Make the heading fixed so that it remains in the same position as you scroll down by giving the value fixed to the position property.

CSS

h1 {
  position: fixed;
  top: 110px;
  left: 0;
  right: 0;
}

Here comes the main part.

The document is given a height of 700px. It is given a linear gradient background color that starts with #3a9ebc from the top and ends with #33b73cat the bottom. This leads to a color change from #3a9ebc to #33b73c as you scroll from the top to the bottom of the document.

CSS

body {
  height: 700px;
  background: linear-gradient(#3a9ebc, #33b73c);
}

Summing Up

Here is the entire code for the animation.

HTML

<h1>Scroll down to See Gradient Change</h1>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {
  height: 700px;
  background: linear-gradient(#3a9ebc, #33b73c);
}

h1 {
  position: fixed;
  top: 110px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
}