CSS Class Highlighter: CSS Inspector

Inspect CSS, highlight classes, compare styles, and explore design tokens. A developer workbench by CodeHorizon.

Inspect CSS, find every matching class, and understand how a page is styled. CSS Class Highlighter is a developer workbench by CodeHorizon for frontend debugging, design system audits, and visual QA. INSPECT ELEMENTS Pick an element on the page or find it with a CSS selector. Explore its box model, computed styles, readable matching CSS rules, attributes, and basic accessibility details. Copy selectors, CSS declarations, or a JavaScript locator, including supported open shadow roots and same-origin frames. HIGHLIGHT AND EXPLORE CSS CLASSES Browse a live, searchable class inventory with occurrence counts. Preview matching elements, pin multiple class highlights, and jump from a class count to an element. Filter generated names, set a minimum count, sort results, and export the filtered list as JSON or CSV. COMPARE STYLES Freeze a computed CSS baseline, then compare another element or a later page state. See changed properties, added or removed classes, and dimension changes. Search the differences and copy the complete comparison as JSON. EXPLORE DESIGN TOKENS View resolved CSS custom properties, including inherited values. Search token names or values, preview colors, and copy declarations or filtered JSON for design system reviews. MAKE IT YOUR WORKBENCH A Material Design 3 Expressive interface with Google Sans, light and dark themes, customizable highlights, and settings for individual sites. Open it from the toolbar, page context menu, or keyboard shortcuts. GET STARTED Open a regular webpage, click the extension icon, and choose Inspect page or Browse classes. Suggested shortcuts: Alt+Shift+C for the inspector, Alt+Shift+H for the last highlight, and Alt+Shift+U for the popup. Chrome lets you change shortcut assignments. PRIVACY No account, tracking, analytics, or developer server is required. Page inspection runs in your browser. Preferences, including the origins of sites you customize, use Chrome Sync. Exports and clipboard copies happen when you request them. BROWSER LIMITS Chrome blocks extensions on internal pages and the Chrome Web Store. Cross-origin frames, closed shadow roots, and protected stylesheet rule text are unavailable. Local file access requires enabling Chrome’s file URL permission. Requires Chrome 127 or newer. A CodeHorizon product https://codehorizon.in