A Chrome extension that lets you measure distances, inspect padding, colors, CSS variables, and layout properties — all with a single click.
Naked CSS is a free Chrome extension that turns any web page into an inspectable design surface. Press Cmd+I, click any element, and hover a second element — the pixel distance between them is rendered directly on the page with guide lines and a labeled value. Hovering surfaces resolved CSS variable names, computed padding and margin with per-side labels, and flex or grid gaps as hatched regions. Designers use it to audit production builds against Figma specs without screenshots or DevTools. Frontend developers use it for self-QA before handoff — measuring, inspecting, and fixing alignment in one keyboard-driven loop. Unlike inline editors like VisBug, the extension is read-only — built for design audits, not design edits. It runs entirely on-device, sends no page content anywhere, and works on every website Chrome lets extensions inject into.
Two workflows, one extension. Pin once, use on every audit.
Designers running design QA load the production build, lock an element with Cmd+I, and measure padding, gaps, and pixel distances against the Figma frame. CSS variable names appear inline, so a token mismatch points to which design token diverged — not just that something diverged. Most audit cycles compress from an hour of screenshots to five minutes on-page.
Frontend developers reach for Naked CSS when CSS layouts misbehave — wrong padding, broken flex alignment, mystery gaps between grid children. Cmd+I, click the broken element, and the extension surfaces every relevant property (computed box model, resolved CSS variable names, flex/grid gap values) in one panel. Use it to debug layout bugs in seconds, or to self-audit a build against the design spec before opening a PR.
Four moments from a real workflow — measuring, inspecting, and debugging layouts directly on the page.
Install the extension to inspect colors, padding, flex/grid gaps, CSS variables, and :hover/:active states on any real page.