-
Hi,
How can I make a gradient on my H1 only on the first 4 words like here: https://imghostr.com/a6a29a_zxg
-
fernandoazarcon2
Hi Galliaeran,
Give the Headline a class of grad-text. Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/
Then, add this through Appearance > Customize > Additional CSS:
.grad-text { background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
Reference to this code: https://cssgradient.io/blog/css-gradient-text/
-
Hi,
That’s not what I meant. how do I create this H1? https://imghostr.com/faec56_jcs
Only the two first words have the gradient
-
fernandoazarcon2
Use two Headline Blocks. Place them inside a Container Block. Set the two Headline Blocks to display – inline. Then set the Gradient as I’ve mentioned but only to one Headline.
-
it’s not good from an SEO perspective.
how can I create it with 1 headline?
-
fernandoazarcon2
You can use the highlight feature of WordPress: https://share.getcloudapp.com/8LuYGqjP
Then, the code would be something like this:
.grad-text > mark{ background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
- You must be logged in to reply to this topic.