SCROLLING GRADIENT

Author:

  • Mike
  • June 27, 2018

Made with:

  • HTML / CSS (SCSS)

About the code:

This is an amazing background gradient that adapts to scroll position. The CSS Only Scroll Indicator technique has been used to make a background gradient that changes with scroll position. The top right corner of the gradient changes while the bottom right remains the same. This works by overlaying 2 gradients, The first is a top-to-bottom gradient with a height of the content. This contains the colors you want to cycle through. The other is a top-left, to bottom-right gradient from transparent to a solid color. This gradient is fixed to the viewport dimensions and pulled behind text, similar to the scroll indicator.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: Yes

Dependencies:

Download Demo and Code