Animated spiral gradient
An animated swirl of pastel colors sits on top of a matching gradient background to create a mesmerizing effect.
Design: Eliran Vahdi, Tech design: Eliran Vahdi
Learn how to create this design in 6 steps
1. Open the Inspector panel and set the height of a blank section to 100vh.
2. Click on the Color picker in the design tab and change the section background to a fluid gradient. Select each color stop to adjust the gradient colors. The ones used in this design are:
3. From the Add panel under decorative, go to transparent videos and search for “gradient circle.” Select the video and add it to the section.
4. Set the width of the video to 40% and dock it to the center of the section.
5. Click on the Behaviors icon in the floating menu. Set the video to play automatically, on a loop with no pause.
6. Preview to see the result. The transparent video spins continuously against a matching gradient background.
Feeling inspired? Create this design on Editor X.
Refresh your skills before you start by visiting Academy X.
.jpg)
