Jump to content

CSS NOOB: Highlighted Text Effect

Recommended Posts

hi! ☻ so i made some custom css to create a text "highlight" effect on my newest project but you'll see from the picture that the "background" color is overlapping on the previous line of text. i know i need to maybe shorten the height of the actual highlight element but i'm kind of a noob with css. if you look at the second example i provided it looks perfect because the highlight goes BEHIND the second line of text and i love the look of the highlight kind of touching the next line of text {am i even making sense?!} any ideas??

here is the code i added for reference:

h2 strong {background: linear-gradient(to bottom, #F7F7EF 60%, #E6F09D 40%);} 

h1 strong {background: linear-gradient(to bottom, #F7F7EF 60%, #FECF97 40%);}

thanks in advance!

Screen Shot 2022-08-12 at 1.14.47 AM.png

Screen Shot 2022-08-12 at 1.15.04 AM.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.