A flowing multicolor gradient text effect for hero headlines, section titles and modern SaaS interfaces.
1. Add a Heading widget or HTML widget in Elementor.
2. Add the class ux-gradient-heading to the heading.
3. Wrap the text that should use the animated gradient inside a span element.
4. Paste the CSS code into Elementor Custom CSS or your website stylesheet.
5. Replace the example headline with your own text.
6. Test the text size and line breaks on desktop, tablet and mobile.
For the exact two-line structure, use an HTML widget. When using a normal Elementor Heading widget, add the class ux-gradient-heading and place the gradient text inside a span in the title field if HTML is allowed.
