CSS Custom Highlights - Interactive CSS Lab | IconVault
Style text ranges with ::highlight(): live search, spellcheck and syntax demos using the CSS Custom Highlight API. Free, runs fully in your browser.
CSS Custom Highlights
Style search hits and code with ::highlight(), live
Search highlight
Try: fox, quick, dog, the
Highlights are not in the DOM: they do not disturb selection, copy/paste or screen readers. One Highlight object can hold many ranges across many nodes.
::highlight(search-hit)
::highlight(spell-error)
Enable the spellcheck toggle to mark the misspelled words.
Syntax demo
function greet(name) {
// say hello to the user
const message = "Hello, " + name + "!";
return message;
}Copy the code
/* 1. Define how each highlight name looks */
::highlight(search-hit) {
background: #fde047;
color: #1c1917;
border-radius: 2px;
}
::highlight(spell-error) {
background: transparent;
text-decoration: underline wavy #ef4444 2px;
text-underline-offset: 3px;
}
::highlight(code-keyword) {
color: #c084fc;
font-weight: 700;
}
::highlight(code-string) {
color: #86efac;
}
::highlight(code-comment) {
color: #6b7280;
font-style: italic;
}
/* 2. Register ranges from JavaScript */
function highlightMatches(root, query) {
CSS.highlights.delete("search-hit");
if (!query) return;
const ranges = [];
const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
let node;
while ((node = walker.nextNode())) {
let i = node.textContent.toLowerCase().indexOf(query.toLowerCase());
while (i >= 0) {
const r = new Range();
r.setStart(node, i);
r.setEnd(node, i + query.length);
ranges.push(r);
i = node.textContent.toLowerCase().indexOf(query.toLowerCase(), i + query.length);
}
}
CSS.highlights.set("search-hit", new Highlight(...ranges));
}5 of 5 free copies left.
About this tool
IconVault's CSS Custom Highlights lab is an interactive playground for the CSS Custom Highlight API. Type in the search box to highlight every match in a paragraph, toggle the spellcheck demo to mark misspelled words with wavy red underlines, and switch the syntax coloring demo to see code tokens styled through ::highlight(). Ranges are registered with CSS.highlights from JavaScript and styled purely in CSS, so you can inspect exactly how the API works. It is free and runs fully in your browser.
Custom highlights solve a long-standing problem: styling arbitrary text ranges without wrapping them in spans. Because highlights live outside the DOM, they never disturb selection, copy and paste, or screen readers. The lab shows the full workflow: walk text nodes, build Range objects, wrap them in a Highlight, register it under a name with CSS.highlights.set(), and style it with ::highlight(name). Support is feature-detected, and the copyable snippet includes both the CSS and the JavaScript you need.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon