Animated header backgrounds
Use a moving shader background in your header, with customizable colors, speed and cursor interaction.
Step by step
- 1
Open Editor → Design → Header and choose Animated.
- 2
Hover the preview cards to see them move, then select a style such as Liquid, Aurora, Ribbon, Caustics or Magnetic. There are 18 styles.
- 3
Under Customize, change the colors, speed and intensity. Turn on cursor interaction if the background should react to the pointer.
- 4
Preview the header and publish.
Good to know
When the header is off-screen the animation pauses and resumes where it left off.
Visitors who prefer reduced motion, and devices that cannot show the animation, see a still version instead. Social sharing images use a still version as well.
