Ido Hershkovits profile picture

Ido Hershkovits

Technical Designer

,

Jul 13, 2022

Gradient Background 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.

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:

  • Color 1: #D769CE

  • Color 2: #FE7D56

  • Color 3: #66B362

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.

How to create a gradient background scroll.
Part 1: Create a section with a gradient background.
Part 2: Add elements to the section.
Part 3: Create the sticky scroll.
Part 4: Finalize the design.
Ido Hershkovits profile picture

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.

Did you find this lesson helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

See all results ▶