Design Trends – Using Back Highlight on Headings

We always love testing out new design trends and one of our favorites right now is the back highlight on certain words within your website design.

You’ve probably seen it, that cool back highlight behind headings but so far you can’t figure out how to make it happen on YOUR site – am I right?!?

Well lucky for you we’ve been able to dissect it from others coding and make it easy for you to do too.

First you will need to add this code to your CSS Custom Code Area on your WordPress Website.

.highlight {
background: linear-gradient(180deg,rgba(255,255,255,0) 50%, 75ced2 50%);
}

Replacing the #75ced2 color hex code with whatever color you want as the back highlight on your website.

Now you want to go sparing with the back highlight so the best way we think to incorporate it is to use “span style” coding on the text to apply this look on an as needed basis.

You will need to be sure that in WordPress you are in the TEXT editor not VISUAL editor. For most page builders you have the ability to switch back and forth to this as well.

Before and after the text you want highlighted – put this code:

YOUR TEXT HERE THAT WILL BE HIGHLIGHTED

If you want an extra space (extending the highlight out from the edges) at the front and back you will need to change the coding slightly here is the coding you will need:

 YOUR TEXT HERE THAT WILL BE HIGHLIGHTED 

Or possibly &nbsp;YOUR TEXT HERE THAT WILL BE HIGHLIGHTED 

We’ve done it both ways with different theme builders to get the desired results. If your editor doesn’t add the space in with the top code, try the second one and it should work great.

Want to add this to ALL headings across your site?

Here is how you would code it. Note using the top code may extend the line 100% width to the element. If you don’t want that and want it to just be behind words you can attempt using the 2nd coding with “display:inline;”.

h3 {
background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #ABD7D7 65%);
}

Using this second set is good when you know the elements will be left aligned. Doesn’t work if you have centered text. That is why we often do a mix of both set headings and using span style as discussed above.

h3 {
background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #ABD7D7 65%);
display: inline;
}

Easy as that and you are the new cool kid on the block with the snazzy website!

Website Design