OneTaskBy Tim King · Updated
CSS Text Highlight Effect
Marker Pen, Thick Underline or Brush Stroke Highlights With a Sweep-In Animation
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Text Highlight Effect works
A text highlight effect marks a key phrase the way a highlighter pen would, so readers catch it while skimming. Type a sentence, choose the words to mark and a marker, underline or brush style, add a sweep-in animation if you like, and copy the HTML and CSS.
The generator wraps your phrase in a <mark> element, which is the HTML tag for text highlighted
for reference. Browsers give mark a plain yellow box by default; the CSS here replaces that with
a background gradient you can size and move, which is the trick behind nearly every designed
highlight on the web.
How the text highlight effect is drawn
A Marker is a single-colour gradient sized to part of the line height and pinned to the bottom,
so the colour sits under the lower half of the letters like a real pen stroke. Underline fades
from transparent to your colour at the height you choose, giving a thick, low highlight.
Brush stroke uses an angled gradient with soft ends that looks hand-drawn. Because the
highlight is a background rather than a border or pseudo-element, it follows the text when it
wraps onto a second line, and box-decoration-break: clone gives each line its own rounded ends.
The sweep-in animation
Sweep in starts the background at zero width and grows it to full width, so the highlight
appears to be drawn left to right after the page loads. It animates background-size only, which
is cheap. Visitors who ask for reduced motion see the finished highlight straight away.
FAQ
Should I use mark or span for highlights?
Use mark when the highlight means something, such as the key point of a paragraph or a search
match, because screen readers can announce it. Use a span with the same class when the colour is
only decoration and carries no meaning.
Why does my highlight disappear behind the text on the next line?
Tall highlights can overlap the line above or below. Keep the height under about 60 percent, or
increase the line-height of the paragraph so each line has room for its own stroke.
How do I start the sweep when the text scrolls into view?
Leave the animation off by default, then add a class with an IntersectionObserver when the
paragraph enters the viewport, and put the animation line under that class instead.
Will the highlight colour pass contrast checks?
Contrast is measured between the text and whatever is directly behind it, so the highlight colour counts. Pale yellows, greens and pinks keep dark text readable; avoid saturated or dark colours behind dark text.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Text Animation
Animate a headline letter by letter and copy the CSS.
Gradient Text Generator
Fill headline text with a CSS gradient and copy the code.
Text Scramble Effect
Make a headline decode from random characters with pure CSS.
CSS Text Shadow Generator
Visual text-shadow builder with drop, long, neon and outline presets.
Fluid Typography Generator
A full fluid type scale of clamp() custom properties with a live specimen.