How to Add gradient effect in Highlighted text

Hi there,

add this CSS:

.gradient-text {
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Select the Text, Heading or Headline block that you want to apply it to, add in Advanced > Additional CSS Class(es) add: gradient-text

Hi David

This highlights the whole text. I just need a gradient effect in the highlighted area.

eg shared privately

If thats using the Highlight option in the editor then that yellow text should become mark element. Try changing the CSS to this:

.gradient-text mark {
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Awesome David

Working Perfectly. One more doubt

What I have to do if I want to add a gradient effect to the container border?

PS: I'm using generateblocks

Ex https://ibb.co/SsQFFJs

Do you mean that wavy line ?

Yes

It includes "shapes" and "container border" also

eg of container border https://ibb.co/3FQwY9G

If its the border to a container then see here:

https://unused-css.com/tools/border-gradient-generator

It will generate the necessary CSS for creating gradient borders

Hi David

Everything working fine. I have one more query

Is that possible to change icons color to gradient?

eg https://ibb.co/mv8mBS7

from yellow to this color
background: rgb(254,177,0);
background: linear-gradient(90deg, rgba(254,177,0,1) 0%, rgba(255,37,37,1) 100%);

Not using CSS.
The Gradient would have to be included in the original SVG Icon and it would probably need to be loaded as an image.

NO david its not working

What is not working ?