Hover Gradient Link creates a smooth animated gradient sweep that reveals on hover, enhancing text links with a clean and modern interaction.
It works as a standard link element or a standalone text component, and gives you full control over typography, colors, animation timing, and layout.
The component is designed to be both visually engaging and flexible, making it suitable for navigation, call-to-actions, or highlighted text elements.
Create a smooth animated gradient that sweeps across the text on hover. You can use 2, 3, or 4 colors to build rich gradients and define the start and end colors for precise control.
The gradient height can be adjusted to cover the full text or only a portion of it, and its position can be set to the top or bottom of the element.
Fully customize the text content, including font, size, weight, and spacing.
Control both the default text color and the hover color to create strong contrast and clear interaction feedback. Padding and border radius can also be adjusted to shape the overall look.
Control how the animation plays with adjustable duration and smooth timing.
You can choose whether the gradient animation finishes its sweep or stops when the cursor leaves. While the animation is running, you can either lock it or allow it to restart on repeated hover.
A text return delay can be added so the text color transitions back slightly before the gradient animation ends, creating a more refined effect.
The component behaves like a standard link and supports opening in a new tab.
A preview mode is available to visualize the hover effect directly in the editor, making it easier to fine-tune the design without interaction.
Works at any size and adapts to different layouts.
The component can be used as a simple inline link or as a more prominent interactive element within buttons, headers, or sections.
Drag Hover Gradient Link onto your canvas
Edit the text and link
Use Preview Hover and customize gradient colors and styling
Adjust animation behavior and timing
Publish
Enjoy!
Nostromo Studio
