How TO - Background Gradient on Scroll


Learn how to create a gradient background color on scroll.


Background Gradient

Try it Yourself »

How To Create a Gradient Background on Scroll

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

Example

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

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


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.