CSS Custom Highlights API Playground

Search & Highlight Interactive

Type a query to highlight all matching text ranges. The API creates StaticRange objects for each match and registers them as a Highlight.

The CSS Custom Highlights API provides a mechanism for styling arbitrary text ranges on a document. Unlike traditional approaches that require wrapping text in span elements, the Highlight API lets you create ranges and apply styles through CSS without modifying the DOM structure. This is particularly useful for features like search highlighting, syntax highlighting, and spell checking. The API uses the CSS.highlights registry to manage named highlight groups, and the ::highlight() pseudo-element to style them. Each Highlight object can contain multiple StaticRange or Range objects, making it efficient to highlight many text fragments simultaneously. The highlights are purely visual and do not affect the document structure or accessibility tree.

CSS ::highlight() rules

::highlight(search-result) {
  background-color: rgba(255, 166, 87, 0.35);
  color: #ffa657;
}

Multi-Color Highlights Registry

Multiple named highlights with distinct colors. Select a color, then click words in the text to highlight them. Each color is a separate Highlight in the registry.

Blue

Green

Purple

Orange

Red

JavaScript is a versatile programming language that powers the modern web. It enables dynamic content, interactive features, and complex applications. From simple form validation to full-stack development with Node.js, JavaScript continues to evolve and adapt. TypeScript adds static type checking on top of JavaScript, catching errors at compile time rather than runtime. React, Vue, and Angular provide component-based architectures for building user interfaces. The ecosystem grows larger every year with new tools, frameworks, and libraries.

CSS ::highlight() rules

::highlight(color-blue) {
  background-color: rgba(88, 166, 255, 0.3);
}
::highlight(color-green) {
  background-color: rgba(63, 185, 80, 0.3);
}
::highlight(color-purple) {
  background-color: rgba(210, 168, 255, 0.3);
}
::highlight(color-orange) {
  background-color: rgba(255, 166, 87, 0.3);
}
::highlight(color-red) {
  background-color: rgba(255, 123, 114, 0.3);
}

Spellcheck Simulation Wavy Underline

Simulates a spellchecker with wavy red underlines on "misspelled" words using ::highlight(spell-error) and text-decoration: underline wavy.

The quik brown fox jumps ovar the layz dog. Programmming is a beutiful art that requiers dedicaton and practise. Every developper knows that writting clean code is essentiall for maintainability.

CSS ::highlight() rules

::highlight(spell-error) {
  text-decoration: underline wavy red;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

Code Syntax Highlighter Multi-Highlight

Basic syntax highlighting using multiple named highlights for keywords, strings, comments, numbers, and function names — all without wrapping tokens in <span> elements.

// Fibonacci sequence generator
function fibonacci(n) {
  if (n <= 1) return n;
  let prev = 0;
  let curr = 1;
  for (let i = 2; i <= n; i++) {
    const temp = curr;
    curr = prev + curr;
    prev = temp;
  }
  return curr;
}

// Calculate and display results
const count = 10;
const results = [];
for (let i = 0; i < count; i++) {
  results.push(fibonacci(i));
}
console.log("Fibonacci:", results);
// Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

CSS ::highlight() rules

::highlight(hl-keyword) {
  color: #ff7b72;
  font-weight: 600;
}
::highlight(hl-string) {
  color: #a5d6ff;
}
::highlight(hl-comment) {
  color: #8b949e;
  font-style: italic;
}
::highlight(hl-number) {
  color: #79c0ff;
}
::highlight(hl-function) {
  color: #d2a8ff;
}

Collaborative Cursors Multi-User

Simulates multiple users editing the same document, each with their own colored highlight selection. Each user's selection is a separate named Highlight in the registry.

Alice

Bob

Carol

Collaborative editing is one of the most powerful features in modern applications. Multiple users can work on the same document simultaneously, seeing each other's cursors and selections in real time. The CSS Custom Highlights API makes it possible to render these selections efficiently without inserting wrapper elements into the document, preserving the original DOM structure while providing rich visual feedback for each participant.

CSS ::highlight() rules

::highlight(cursor-alice) {
  background-color: rgba(88, 166, 255, 0.25);
  border-bottom: 2px solid #58a6ff;
}
::highlight(cursor-bob) {
  background-color: rgba(63, 185, 80, 0.25);
  border-bottom: 2px solid #3fb950;
}
::highlight(cursor-carol) {
  background-color: rgba(210, 168, 255, 0.25);
  border-bottom: 2px solid #d2a8ff;
}

Range Inspector StaticRange

Visualize StaticRange objects by setting start and end offsets. See how the Highlights API maps character positions to visual highlights.

Start Offset

End Offset

The StaticRange interface represents a lightweight range that does not update when the DOM changes. Unlike the live Range object, StaticRange is immutable once created, making it ideal for the Highlights API where ranges represent fixed text positions.

Start Node Text #0

Start Offset 0

End Node Text #0

End Offset 25

Selected Text —

Length 25

CSS ::highlight() rules

::highlight(range-inspect) {
  background-color: rgba(255, 166, 87, 0.3);
  outline: 1px dashed #ffa657;
}