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!
Explore more topics
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
Add a container to the section
Remove the container background
Set the container width to 100%
Adjust the margins to zero on all sides
Taking into account the height of the header, set the container’s height to a calculation of (100vh - 50px)
Set the minimum height of the container to None
Make sure the container is docked to the top of the section
Add the SVG basic shape to the container
From the floating action bar under settings, toggle off Keep original proportions
Set the width and height of the shape to 100%
Remove the margins
Set the shape to Scale proportionally (this will automatically set the height to auto)
Add a maximum height of 100%
Add the text element to the container
Align the text horizontally and vertically so it is docked to the center of the container
Part 3: Create the sticky scroll
Select the container
From the Inspector panel, set the Position type to Sticky
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.