Add gradient to specific text

Want just a portion of your text to have something special about it like a background gradient? Upload a gradient then target it using this:

//Add 4gradient to italic h1
h1 em, h2 em {
font-style: normal;
background-image: url('https://images.squarespace-cdn.com/content/65f1c68b49cf6d6ffc986e2d/cf4430cc-643c-4830-a742-b015cf7910fb/gradient-wide.png?content-type=image%2Fpng');
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size:cover;
}

No go put some h1 or h2 in italcs and watch the magic. Note, the above code removes the italic effect - if you want to add the italics back in for a specific text, leaving all other text with this affect as non italic, target the block directly add add the following - make sure this is BELOW the code you add from above so that this effect applies last:

h1 em {
font-style: italics!important;
}

THAT Branding Company

A Creative Branding and Design Agency with one clear goal - making your business a success. Get in touch - 0191 8100 320.

http://www.thatbranding.company
Previous
Previous

Hide Play Pause Button

Next
Next

Custom Mobile Menu background