Webspe Tools

Text Highlighter CSS Generator

Create custom text highlights with CSS using this free online generator.
Adjust the highlight thickness, position, color, padding, and other settings while checking the result with a real-time preview.
Copy the generated CSS code and use it directly in your website or web project.

Sponsored Links

Customization

Text Settings

px

px

Highlighter Settings


* Increase the vertical padding if the highlight extends too far beyond the text.

em
= 8px

▼ Padding

em
= 0px
em
= 0px

em
= 0px

▼ Highlighter Color

Advanced Settings

CSS Code

background-image: linear-gradient(0deg, #fbbf2480 0.5em, transparent 0.5em);

Notes

  • The code assumes that styles are applied to inline elements.
  • This site uses modern-normalize.css. The preview may look slightly different depending on the reset CSS or other styles used in your project.

\ Share on social media /

Sponsored Links

Related Tools