In this guide, we’ll show you how to add the “Gradient Underline Text Effect widget” to your Elementor website. This free widget lets you apply a sleek gradient underline to your text, adding style and interactivity with a smooth hover effect. Perfect for highlighting headings, buttons, or key content, it enhances your design with minimal effort.
Let’s explore the customization options available in the “Gradient Underline Text Effect widget” for Elementor.
Add a Free Gradient Underline Text Effect to Elementor
Go to Unlimited Elements and click "Widgets".
Search for "Gradient Underline Text Effect" in the widget library.
Hover over the widget and click Install.
Add a Free Gradient Underline Text Effect Widget to an Elementor Page
Click "Add Element" in Elementor
Search for "Gradient Underline Text Effect" in the widget panel.
Drag and drop the “Gradient Underline Text Effect” widget into the container.
Elementor Gradient Underline Text Effect Widget General Settings
Beginning Text
Input field for text, with dynamic content.
Middle Text
Input field for text, with dynamic content.
Ending Text
Input field for text, with dynamic content.
Text Align
Dropdown to set text alignment.
HTML Tag
Dropdown to select the HTML element.
All Text
Global text styling/editing option, with a global icon and an edit icon.
Elementor Gradient Underline Text Effect Widget Style Settings
Gradient Underline One
Color control for the first gradient underline.
Gradient Underline Two
Color control for the second gradient underline.
Beginning Text Typography
Typography settings for the beginning text.
Underline Text Typography
Typography settings for the underline text.
Ending Text Typography
Typography settings for the ending text.
Beginning Text Color
Color control for the beginning text.
Middle Text Color
Color control for the middle text.
Ending Text Color
Color control for the ending text.
All Text Color
Global color control for all text.
Gradient Underline Text Effect Widget Design Examples For Elementor
Here are some live use cases for the Gradient Underline Text Effect widget.
Post Accordion for Woocommerce with Gradient Underline Text Effect.
Product Highlight Widget with Gradient Underline Text Effect
Thank you for using the Gradient Underline Text Effect widget for Elementor! This free widget lets you add a stylish gradient underline to your text, creating an interactive and modern look. It’s a simple yet effective way to highlight headings, buttons, or key content and enhance your page design. Need inspiration? Visit our demo page to see it in action.