CSS HIGHLIGHTER MARKER GENERATOR

Example output (default settings)

.hl-marker {
  background-color: transparent;
  color: inherit;
  padding: 0 0.3em;
  background-image: linear-gradient(#ffe17d, #ffe17d);
  background-repeat: no-repeat;
  background-size: 100% 55%;
  background-position: 0 82.2%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<p>Every <mark class="hl-marker">important idea</mark> deserves a highlight.</p>

How to make a CSS highlighter marker effect

1. 1

   Pick a highlight color, or start from one of the presets.

2. 2

   Choose a style: solid bar, soft edges, or a stroke that fades out to the right.

3. 3

   Adjust the stroke height, how far it sits above the baseline, and the side padding.

4. 4

   Optionally add a sweep animation that plays on hover or once on page load, and set its duration.

5. 5

   Copy the HTML and CSS and paste them into your page.

Questions

How is this different from the default mark element styling?

The browser's default <mark> paints a full-height flat rectangle behind the text. This generator draws the highlight as a background gradient instead, so you can make it only part of the line height, lift it off the baseline like a real marker stroke, soften or fade its ends, and animate it sweeping across.

Does the highlight work when the text wraps onto two lines?

Yes. The CSS sets box-decoration-break: clone (with the -webkit- prefix), so each wrapped line fragment gets its own full highlight, including the side padding, instead of the stroke being split across the break.

How does the sweep animation work?

The highlight starts at a background-size width of 0% and grows to 100% while keeping its height. The hover option transitions the size when the text is hovered or focused; the on-load option runs a one-time keyframe animation after a short delay. Both are switched off under prefers-reduced-motion, where the full highlight is shown immediately.

Can I use it on elements other than mark?

Yes. Everything hangs off the .hl-marker class, so you can put it on a span, em, or a link. It works best on inline elements; on block elements the highlight spans the whole width of the box rather than hugging the text.

Is anything uploaded?

No. The CSS is generated in your browser from the options you set, and nothing is sent to a server.

Related tools

• Glitch Text GeneratorAnimate an RGB-split, scan-line glitch effect on headline text, with adjustable offset, speed, and colors.
• Neon Glow GeneratorBuild a glowing neon-sign effect for text or a box, with stacked shadow layers and an optional flicker animation.
• Animated Gradient Text GeneratorFill text with a multi-color CSS gradient that drifts across the letters, with adjustable angle and speed.
• Typewriter Effect GeneratorAnimate text typing itself out with a pure-CSS steps() animation and a blinking caret — no JavaScript needed.
• CSS Marquee GeneratorBuild a seamless, looping scrolling-text ticker in pure CSS with direction, speed, gap, pause-on-hover, and faded edges.
• Shimmer / Metallic Text GeneratorSweep a bright highlight band across text for a metallic or shimmer effect, built with an animated gradient.
• Text Stroke / Outline GeneratorBuild hollow or filled outlined headlines with -webkit-text-stroke and a cross-browser shadow fallback.
• 3D Extruded Text GeneratorGive flat text a solid, extruded look with a stack of offset text-shadow layers — adjust depth, angle, and color.