top of page

Creating a changing gradient background on scroll

Follow along with technical designer Ido as he explains how to create a gradient background that changes color while scrolling. In this example, we’ll recreate the effect from our mid-year 2022 digital design trends report.

What do you think about the course so far?

Thank you for your feedback!

How can we improve?

Thanks for submitting!

Explore more topics

Additional resources

Visit our help center

Ask the community

Hire an expert

Contact customer care

Ido Hershkovits

Technical Designer

I’m a web developer and Editor X specialist based in Tel Aviv. I work closely alongside the Editor X marketing team as a coding and responsive design expert. In my spare time, I’m a passionate musician and producer.

How to create a gradient background scroll

Part 1: Create a section with a gradient background

1. Start with a blank section

2. Set the section height to 250vh

Note: The height of the section determines how long the gradient scroll will last. The section height needs to be more than 100vh in order to create the scroll effect.

3. Select the Design tab in the Inspector panel

4. Open the Color Picker

5. Choose the linear gradient

6. Set the degrees to zero so the colors align horizontally

7. Select the colors

Note: In this example, the gradient is made up of 3 colors. Add more color stops by clicking where you want them on the slider. Click and drag the stops to adjust the fade. The colors used in this example are:

Part 2: Add elements to the section

  1. Add a container to the section

  2. Remove the container background

  3. Set the container width to 100%

  4. Adjust the margins to zero on all sides

  5. Taking into account the height of the header, set the container’s height to a calculation of (100vh - 50px)

  6. Set the minimum height of the container to None

  7. Make sure the container is docked to the top of the section

  8. Add the SVG basic shape to the container

  9. From the floating action bar under settings, toggle off Keep original proportions

  10. Set the width and height of the shape to 100%

  11. Remove the margins

  12. Set the shape to Scale proportionally (this will automatically set the height to auto)

  13. Add a maximum height of 100%

  14. Add the text element to the container

  15. Align the text horizontally and vertically so it is docked to the center of the container

Part 3: Create the sticky scroll

  1. Select the container

  2. From the Inspector panel, set the Position type to Sticky

  3. Keep the Top offset at zero

Part 4: Finalize the design

You can add a section below the gradient one with the same background color as the last color of your gradient to create a smooth transition between sections. The new section will push the previous one once the gradient scroll is finished.

Result: When you preview the site and scroll down, the text and shape stay in place while in the background the gradient moves through colors.



Background scroll effects


Video & decorative


Creating a full page sticky scroll effect

bottom of page