How TO - Background Gradient on Scroll

Learn how to create a gradient background color on scroll.

Background Gradient

Create a linear gradient background color that starts from the top. It starts from teal/green to blue:

body {
height: 3000px; /* Used to enable scrolling */
background: linear-gradient(55deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 85%);
}

Tip: To learn more about gradient backgrounds, go to our CSS Gradients Tutorial.