top of page

Music festival site with gradient scroll

Editor X Team


Apr 20, 2023

Music festival site with gradient scroll

This site uses a gradient background scroll effect to promote an event in an eye-catching way.

Design: Linor Pinto, Tech design: Tal Shenkar

Learn how to recreate this design in 12 steps

1. From the Inspector panel, set a blank section to a height that’s greater than the height of the viewport. For this design, start with 700vh

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

2. Apply a 3X7 grid to the section. Set the width of the first and third columns to 75px, and the width of the second column to 1fr. Set each row’s height to 100vh

3. Under the design tab in the Inspector panel, add a gradient background to the section. 

image of step 3

4. Choose a linear gradient and set the angle to 180°

image of step 4

5. Change the gradient colors by selecting the color stops. Click on the slider to add more color stops. 

image of step 5

6. Click and drag the color stops across the slider to adjust the distances between color changes.

image of step 6

7. From the Add panel under Media, upload 2 images to use for the background: an image with a transparent center, and a cropped version that’s the upper third of the image. The cropped image works as a “mask” to create the scroll effect. 

image of step 7

8. Add the full image to the first grid row in the section. Position and stretch it to the full width and height of the row, covering all 3 cells. Change its position type to Sticky

image of step 8

9. Add content to each of the remaining grid rows. Position the content so it will be centered over the circle on scroll. 

image of step 9

10. Add the cropped circle image to the first section, and stretch it so it fits perfectly over the original background circle. Set its position type to Sticky

Tip: You can set the full image to Don’t Display to check that the cropped one is positioned correctly.

image of step 10

11. From the Layers panel, make sure the full image is arranged behind all of the other content in the section by dragging it to the bottom of the list. Make sure the cropped image is in front of all of the other content by dragging it to the top. 

image of step 11

12. Preview the site. As you scroll, the gradient inside the circle changes and the content moves into the circle, then scrolls up behind the top of the circle. 

image of step 12

Refresh your skills before you start by visiting Academy X.

More inspiration



Editor X

The rest is up to you.

bottom of page