Easy Underline Overlay Effect on Text in Elementor
Get Premium

Easy Underline Overlay Effect on Text in Elementor

Element.How also offers premium tutorials! Check them here:

Easy Underline Overlay Effect on Text in Elementor

Table of Contents

Today, We will show you how to create an Underline Overlay Effect on your text in Elementor. This something many people are looking for, I now want to give you the solution without using any 3rd party plugin, and it’s pretty much easy to implement. Do share this article if it helps you in any way.

Adding Text on your Page

To begin with this, take any text or heading widget from your Elementor widget menu and type your desired content. For this tutorial we will be using the text “Elementor is The Best WordPress Builder”.

Adding Class to Elementor Text Widget

Now, this is one of the key step for this design to work, add the class “highlight” to span tag before and after the text where you need this highlight effect. As shown in image below.

				
					Elementor is <br> The Best  <br> <span class="highlight">WordPress Builder</span>

<! --Please note here the tag "br" is given to add line breaks you can avoid that if you need your heading in one line -->
Easy Underline Overlay Effect on Text in Elementor
Adding Text in Heading Widget with Class Highlight

Adding the Custom CSS to Class

And here comes the final nail to achieve this in display, so to get the effect add the code below using custom CSS if a pro user or simply an HTML block if on the free version of Elementor.
(Don’t forget to add “style” tags in HTML for this CSS to work in HTML block)

				
					.highlight {
  background: linear-gradient(180deg,white 50%, yellow 50%);
}

<!--Use this if using HTML Block -->

<style>
.highlight {
  background: linear-gradient(180deg,white 50%, yellow 50%);
}
</style>
Easy Underline Overlay Effect on Text in Elementor
Add Custom CSS Code in Elementor

Playing More with the Design

You can even play with the code to achieve more awesome designs.

				
					.highlight {
  background: linear-gradient(180deg,#FF5733 50%, #21034F 50%);
  color:white
}
Easy Underline Overlay Effect on Text in Elementor
Playing with Custom CSS for more Customization

End Note

That’s all, yes this was this easy to achieve. I hope you found this tutorial helpful. Feel free to ask anything in comments if you face any issue.

Easy Underline Overlay Effect on Text in Elementor
Easy Underline Overlay Effect on Text in Elementor

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

10 Responses

  3. Thanks for the trick, Maxime. One question, with this method, the underline applies to the whole width of the widget, not only to the text.

    Is there a way to limit the underline to the text only?

    Merci.

  5. Loved this Maxime 😍, thank you so much. I needed this effect so much.
    Please keep on adding such Elementor hacks. Cheers

  6. On the desktop view it looks really very good, unfortunately not so on mobile. What do I need to adjust so that it looks the same on mobile as it does on desktop? On mobile only the bottom line is underlined, not the headline itself. Thanks for your help. Many greetings, Helga

Leave a Reply