CSS Custom Highlight API
Checking compatibility...
Programmatically highlight text ranges without modifying the DOM structure. Create and manage custom text highlights with CSS styling.
Basic Highlighting
Create and style text highlights by defining ranges and applying CSS styles with the ::highlight() pseudo-element.
=
=
=
=
=
=
Output
Click Run to see output...Search Highlighting
Highlight all occurrences of a search term by creating ranges for each match and styling them all at once.
=
=
=
=
=
=
Output
Click Run to see output...Animated Highlighting
Create moving highlights by combining the Custom Highlight API with CSS transitions for smooth animations through text.
=
=
=
=
=
=
Output
Click Run to see output...