A modern rewrite of the popular CSS Viewer extension for Chromium-based browsers. Hover over any element on a page to inspect its computed styles in a floating panel.
- Hover over any element to view its CSS properties in a floating panel
- Freeze the panel in place to inspect it
- DevTools-style box model diagram for margin, border, and padding — turn it off in settings for a shorter panel or plain text values
- Copy an element's style to clipboard, or freeze the panel to copy individual property values
- Copy the same properties as JSON (
J) for diffing or feeding other tools - Keyboard shortcut to toggle the viewer (
Alt+Shift+S; macOS:Option+Shift+S) - WCAG contrast ratio for color vs background-color
- Ability to increase/decrease font size
- Dark mode support
- Iframe support
- Classes section with click-to-copy chips or "Copy All"
The easiest way to install this extension is from the Chrome Web Store.
Requires Node 20+. Clone the repository, then run:
npm install
npm run dev # Watches for changes, rebuilds the extension
npm run lint
npm run testThen open chrome://extensions (Google Chrome) or edge://extensions (Microsoft Edge), turn on Developer mode (top-right in Chrome, bottom left in Edge), click Load Unpacked and choose the dist/ directory.
Click the toolbar icon (or press Alt+Shift+S (Windows) or Option+Shift+S (macOS)) to enable or disable the viewer on the current page. While enabled, hover over any element to inspect it.
You can customize the toggle shortcut at chrome://extensions/shortcuts.
Fto freeze or unfreeze the panel in placeCto copy a simple CSS definition for the selected element to the clipboardShift+Cto copy the element's classes (space-separated)Jto copy the same properties as JSON ({ selector, properties })Lto show or hide the Classes row+/-to increase or decrease the panel font size (0/ zero resets to default)Sto open the settings pageEscto close the viewer
On elements with a class attribute, a Classes row appears below the header with click-to-copy chips and Copy All (long lists cap at a configurable number of wrap lines — default 3 — with +N more). The header shows the tag and #id only. Toggle the row anytime with L or Show CSS Classes in settings (Shift+C still copies classes).
Press S while inspecting to open the settings page. A live Panel Preview beside the settings shows each change as you make it.
| Setting | Default | What it does |
|---|---|---|
| Panel Theme | System | Light, Dark, or System (follows your OS appearance). |
| Show Box Model Diagram | On | Draws the DevTools-style margin / border / padding diagram in the Box section. Off shows those values as normal property rows instead. |
| Show CSS Classes | On | Shows the Classes row with click-to-copy chips. Toggle without leaving the page with L; Shift+C still copies classes when the row is hidden. |
| CSS Class Lines | 3 | How many lines of class chips to show before collapsing into +N more (1–9). |
| Panel Font Size | 11px | Base font size for the overlay (8–18px). The panel width scales with it. Adjust while inspecting with + / -, or press 0 to reset. |
Between the box model and Classes toggles you can trim the panel down to just the property rows, which is useful on small screens or when the diagram and chips crowd out what you are actually inspecting.
Reset to Defaults at the bottom of the settings page restores every option above.
Values are the element’s current computed styles—what the browser is rendering right now—not authored CSS or cascade sources.
That includes interaction state: hovering a link shows its :hover color (and any other hover styles), which matches what you see under the cursor. Press F to freeze while hovered if you want to keep that snapshot and move the mouse away.
Copied CSS (C) and JSON (J) use the same live computed values as the panel, including colors in the form shown (hex when opaque, rgba() with alpha).
The Box section shows a DevTools-style margin / border / padding diagram by default; turn off Show Box Model Diagram in settings to see those values as normal property rows instead.