Gardient Liquid Text

Liquid Gradient Text

Liquid Gradient Text turns your headline into a slow, flowing surface of color. One gradient moves through all the letters at once, so the whole word stays balanced instead of lighting up letter by letter. Move the cursor over it and the color swirls like liquid being stirred, then settles back into its calm drift.

Choose a base, an accent and a highlight color, and set a separate palette for dark mode so the text looks right on any background. It works with any font in your project, including custom uploads, and fits itself to its frame on every breakpoint.

Highlights

• One continuous gradient across every letter, with liquid motion on hover

• Light and dark mode colors, plus support for color styles

• Any font, multi-line text, fit-to-frame and alignment options

• Adjustable drift speed and stir strength

• Real hidden text for SEO and screen readers, with a choice of H1, H2, H3 or paragraph

• Stays still for visitors who prefer reduced motion, and pauses when scrolled out of view

How to use

Drag the component onto your page and set its width and height. With Fit turned on, the text fills the frame, so the frame size controls the text size. Pick your font in the component’s Font control, choose your colors, and open Preview to see the motion