Hover Gradient Link

About This Component Hover Gradient Link creates a smooth animated gradient sweep that reveals on hover, enhancing text links with a clean and modern interaction.

About This Component 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. Demo preview Key Features Gradient Animation 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. Text & Styling 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. Animation Behavior 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. Interaction & Preview 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. Layout Flexibility 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. How to Set Up 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!

Animated Gradient Hover Text Link