CSS Text Highlighter Generator

This CSS text highlighter generator lets you create marker pen style text highlights. Adjust font preview settings, line weight, padding, position, opacity, and single or gradient colors, then copy the generated CSS for inline text elements.

Customization

Enter Text

Font Size {{ fontSize }}px

Line Height {{ lineHeight }}px

Line Weight {{ lineWeight }}em

Line Position {{ linePosition }}em

Padding X {{ paddingX }}em

Padding Y {{ paddingY }}em

Highlighter Color

Opacity {{ opacity.toFixed(2) }}

Color

{{ markerColorStart }}

Gradient End Color

{{ markerColorEnd }}

Preview

inline