How to Create an Underline Overlay Effect in Elementor

Creating a Standard Underline Overlay Effect

You can add an underline overlay effect to your text elements in Elementor or the block editor with a small bit of CSS. This can be added to your child theme CSS file , theme Custom CSS area, Elementor Site Settings Custom CSS area, or simply inline. See the following usage examples provided below.

Example Underline Overlay Here

HTML Used In Block Editor Or Elementor Widget

<h3>Example <span class ="highlight">Underline Overlay</span> Here</h3>

CSS Here

Add this to your Preferred Custom CSS area.

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

Creating a Gradient Underline Highlight Effect

You may also use a gradient effect along with font color CSS in your text. There are many online gradient generators to help you with this.

Example Gradient Underline Overlay Text Here

HTML Used In Block Editor Or Elementor Widget

<h3>Example <span class="gradient-highlight"> Gradient Underline Overlay </span> Text Here</h3>

CSS Here

Add this to your Preferred Custom CSS area.

.gradient-highlight{background: linear-gradient(0deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
color:white}

Using Inline CSS in the HTML of your Text

If you need to add this effect to a specific element or do not have access to the other CSS methods, you may additionally add the CSS directly inline in the HTML.

Example Inline CSS Underline Overlay Text Here

HTML Used In Block Editor Or Elementor Widget

Example <span style ="background: linear-gradient(180deg, rgba(39,244,164,1) 0%, rgba(40,27,88,1) 100%);
color:white">Inline CSS Underline Overlay</span> Text Here

Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email
Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

Want to learn from Elementor Web creators?

Join Our New Community Hub!