Birthday Sale!

Days
Hours
Min
Sec

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Pagination to Elementor Posts - Featured Blog
Gradient Text - Featured Blog
wordpress-tag-cloud-coming-out-of-pink-computer-sc__61658

Gradient Underline Text Effect Widget for Elementor (Free and Easy to Use)

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

1

Go to Unlimited Elements and click "Widgets".

2

Search for "Gradient Underline Text Effect" in the widget library.

3

Hover over the widget and click Install.

Add a Free Gradient Underline Text Effect to Elementor

Add a Free Gradient Underline Text Effect Widget to an Elementor Page

1

Click "Add Element" in Elementor

2

Search for "Gradient Underline Text Effect" in the widget panel.

3

Drag and drop the “Gradient Underline Text Effect” widget into the container.

Add a Free Gradient Underline Text Effect Widget to an Elementor Page

Elementor Gradient Underline Text Effect Widget General Settings

Elementor Gradient Underline Text Effect Widget General Settings
1

Beginning Text

Input field for text, with dynamic content.

2

Middle Text

Input field for text, with dynamic content.

3

Ending Text

Input field for text, with dynamic content.

4

Text Align

Dropdown to set text alignment.

5

HTML Tag

Dropdown to select the HTML element.

6

All Text

Global text styling/editing option, with a global icon and an edit icon.

Elementor Gradient Underline Text Effect Widget Style Settings

Elementor Gradient Underline Text Effect Widget Style Settings
1

Gradient Underline One

Color control for the first gradient underline.

2

Gradient Underline Two

Color control for the second gradient underline.

3

Beginning Text Typography

Typography settings for the beginning text.

4

Underline Text Typography

Typography settings for the underline text.

5

Ending Text Typography

Typography settings for the ending text.

6

Beginning Text Color

Color control for the beginning text.

7

Middle Text Color

Color control for the middle text.

8

Ending Text Color

Color control for the ending text.

9

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

Post Accordion for Woocommerce with Gradient Underline Text Effect.

Product Highlight Widget 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.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!