How to Dynamically Change Image Color Gradients Using codepen.io

In the terminology of image editing programs like Adobe Photoshop, gradients refer to images or image properties in which a color that is prominent in one part of an image transitions to a different color as the viewer's vision travels across the image's span. Commonly, the space between a gradient's beginning color and its ending color will be a smooth blend of the two colors, with a given color becoming more prominent as the observer's eye approaches that color's "origin point." Websites that have gradient-based backgrounds, regardless of whether they are images constructed in an image-editing program or are natively generated using web syntax, tend to involve a small number of static colors and present the same static image even as the user scrolls down a web page's contents.

On the website codepen.io, a user who goes by the name "Mike" has posted an interactive project that displays how CSS syntax can be used to create a background in which one of the gradient colors making up the background image appears to dynamically change in accordance with how far the user has scrolled down the page. Even though the contributing color that has been positioned at the lower right corner of the background remains light blue, the contributing color at the upper left corner of the background changes between the colors of the rainbow as the viewer scrolls down the page.

Mike explains that this effect can be achieved quite simplistically in CSS by having one gradient overlaid on top of another, and viewers can see the CSS syntax behind the effect via the site's Editor View function. The changing colors belong to a vertically aligned gradient made up of thick and horizontal colored bars; this stretches all the way to the bottom of the page, and it does not move alongside the user's browser window. Meanwhile, a gradient with a blue contributing color on the lower right and an "empty" contributing color on the upper left is overlaid on top of the background and travels with the browser window as the user scrolls across the page. For more information click here https://codepen.io/MadeByMike/pen/eKPZZz.