A nifty CSS trick to add highlights with gradients to your text is quick and simple with a bit of CSS.
First in your theme custom CSS or Elementor PRO Custom CSS area, define a class like below where the class is called something recognizable like .highlight
In the settings of this CSS you can define if the highlight is linear or angled, the color, gradient and opacity of the highlight. In this example, there is a light color fading into pink to create a thinner underline. To increase the highlight or make a thick highlight, define the percentages accordingly.
Second, call the class with SPAN to identify the text to be highlighted.
In less than 5 minutes, you can set highlights and use them throughout your site. Keep in mind that you can define multiple highlights if you want different colors, opacities, etc.
.highlight {
background: linear-gradient(180deg, #02010100 80%, pink 20%);
}
<span class="highlight">Insert Text To Highlight Here</span>