Text Highlighter CSS Generator

Generates CSS code to highlight text with a marker pen or highlighter style.
The highlighter position and thickness can be customized.
The output CSS code can be easily used by copy and paste.

Sponsored Links

Customization

Text Setting

px

px

Highlighter Setting


*If the value exceeds 1em by a large amount, the Y direction Padding should be increased.

em
= 8px

▼ Padding

em
= 0px
em
= 0px

em
= 0px

▼ Highlighter Color

Additional Setting

CSS Code

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

Notes

  • The code assumes that styles are applied to inline elements.
  • The reset CSS of this site is based on “modern-normalize.css”. Depending on the reset CSS and other stylesheets loaded in your project, there may be differences from the preview appearance.

\ Share on SNS /

Sponsored Links

Tools

CSS Generators

UI Parts Generators

HTML Converters

Image Generators