[Support request] How to Add gradient effect in Highlighted text

[sandeep kumar]

Hi

I’m trying to add gradient effect in Highlighted text

is that possible?

Thanks

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sandeep kumar]

Hi David

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

eg shared privately

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sandeep kumar]

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

[David]

Do you mean that wavy line ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sandeep kumar]

Yes

It includes “shapes” and “container border” also

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sandeep kumar]

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%);

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sandeep kumar]

NO david its not working

[David]

What is not working ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts