CSS Custom Highlight API

Baseline 2025 Reference ↗

Custom highlights style arbitrary text ranges without wrapping them in extra spans. That is useful for search results, annotations, and editor overlays.

const range = new Range();
range.selectNodeContents(result);

CSS.highlights.set(
  'search-result',
  new Highlight(range),
);

::highlight(search-result) {
  color: inherit;
  background: gold;
}

A custom highlight is not the user’s selection and adds no semantics by itself. Do not rely on color alone to communicate meaning.