- This topic has 11 replies, 2 voices, and was last updated 3 years, 5 months ago by
David.
-
AuthorPosts
-
October 8, 2022 at 1:14 am #2366834
sandeep kumar
Hi
I’m trying to add gradient effect in Highlighted text
is that possible?
Thanks
October 8, 2022 at 6:43 am #2367021David
StaffCustomer SupportHi 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-textOctober 8, 2022 at 7:30 am #2367058sandeep kumar
Hi David
This highlights the whole text. I just need a gradient effect in the highlighted area.
eg shared privately
October 9, 2022 at 3:50 am #2367571David
StaffCustomer SupportIf thats using the Highlight option in the editor then that yellow text should become
markelement. Try changing the CSS to this:.gradient-text mark { background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }October 9, 2022 at 4:28 am #2367596sandeep 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
October 9, 2022 at 5:57 am #2367695David
StaffCustomer SupportDo you mean that wavy line ?
October 9, 2022 at 6:29 am #2367732sandeep kumar
October 10, 2022 at 3:37 am #2368536David
StaffCustomer SupportIf 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
November 2, 2022 at 3:50 am #2397982sandeep kumar
Hi David
Everything working fine. I have one more query
Is that possible to change icons color to gradient?
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%);November 2, 2022 at 4:05 am #2398004David
StaffCustomer SupportNot 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.November 2, 2022 at 4:13 am #2398016sandeep kumar
NO david its not working
November 2, 2022 at 7:12 am #2398275David
StaffCustomer SupportWhat is not working ?
-
AuthorPosts
- You must be logged in to reply to this topic.