Live Preview

This page is running the effect in real time.

Use the preset selector in the bottom right to explore different variations and see how the effect responds instantly. All changes are applied live, allowing you to understand how it behaves before using it on your own site.

---

Key Benefits

• Included and ready to use
• Live preview in the Customizer
• No code required
• Directional motion with adjustable easing
• Save and reuse presets

---

Description

ColorShifter is designed to introduce motion through layered gradients.

Instead of a single moving surface, it uses multiple gradient layers that slide across each other, creating depth and variation. Direction, speed, and easing can all be adjusted, allowing the effect to feel smooth and controlled or more dynamic depending on the configuration.

Because the movement is directional, it adds structure to the background while still remaining flexible.

This makes it suitable for layouts that benefit from motion, but still require a sense of order and consistency.

---

Use Cases

• Hero sections
• Landing pages
• Section backgrounds
• Brand-focused layouts

---

Control & Customisation

All aspects of the effect can be adjusted visually through the Customizer.

• Colour palette (up to six colours)
• Gradient angle and direction
• Animation speed and easing
• Primary and secondary movement directions
• Random start and colour order
• Layer opacity control
• Preset system (included and custom)

Effects can also be applied at a page or container level when needed.

---

Performance

Designed to run smoothly using layered gradients rather than complex animated elements.

---

Licensing

This effect is included and free to use.

• Available immediately after plugin installation
• No license required
• Fully customisable with presets

---

Explore different presets on this page, then fine-tune the effect in the Customizer once installed.