Naked CSS — CSS Inspector, Pixel Ruler & Layout Debugger

Description

Measure pixel distance, inspect padding, margins, colors & CSS variables on any element. Free Chrome layout debugger. Naked CSS turns any web page into a measurable, inspectable surface. Click an element, hover another — and see the pixel distance, padding, margin, and layout properties drawn directly on the page. Stop diving into DevTools to check a 4px padding. Stop guessing pixel distances. Stop hunting through stylesheets for which --color-primary is being applied. ▸ HOW IT WORKS 1. Press Cmd+I (Mac) or Ctrl+I (Windows/Linux) on any page. 2. Click an element to lock your selection. 3. Hover any other element to instantly see the pixel distance — with guide lines and labeled values. That's it. No panel to dock. No friction. ▸ WHAT'S INSIDE PIXEL DISTANCE MEASUREMENT Horizontal and vertical pixel distance between any two elements, with solid measurement lines, dashed guide lines, and clean numeric labels. PADDING & MARGIN VISUALIZATION Padding shown in purple hatching. Margin in orange. Per-side labels for top, right, bottom, and left — without ever opening DevTools. FLEX & GRID GAP DETECTION Hatched gap regions between flex/grid children with their pixel values labeled. Design-system review in seconds. CSS VARIABLE INSPECTION See colors with their CSS variable names resolved automatically. The fastest way to inspect CSS variables in Chrome — no more grepping stylesheets to find which token is in use. COLOR + SWATCH PANEL Background, text, border, fill, and stroke colors with hex values, opacity-aware swatches, and design-token names. LAYOUT PROPERTIES Display type, flex-direction, justify-content, align-items, gap, grid-template-columns, and grid-template-rows in a clean info panel on selection. BORDER RADIUS LABELS Per-corner radius values displayed when ≥ 4px. :hover / :active STATE SIMULATION Toggle between Default, Hover, and Active states for any selected element. Inspect interactive states without moving your cursor. TYPOGRAPHY INSPECTION Font family, font size, and stroke width for the selected element. ASSET COPY Click an IMG to copy its URL. Click an SVG to copy its outerHTML. One-click design asset extraction for handoff and rebuilds. CUSTOMIZABLE KEYBOARD SHORTCUTS Cmd/Ctrl+I to toggle, Esc to dismiss. Rebind anything from the options page. ▸ WHO IT'S FOR • Frontend engineers debugging layouts • Design engineers verifying pixel-perfect implementation • UI designers reviewing dev handoffs • QA engineers comparing mockups to production • Anyone tired of opening DevTools to check a 4px padding ▸ HOW IT'S DIFFERENT FROM CHROME DEVTOOLS DevTools shows you one element at a time. Naked CSS shows you the relationship between two — pixel distance, alignment, padding — drawn directly on the page. Use it alongside DevTools, not instead of it. ▸ KEYBOARD SHORTCUTS • Cmd+I (Mac) / Ctrl+I (Windows/Linux) — Toggle on/off • Esc — Dismiss selection • Click — Lock selection on element • Hover — Measure distance from selection All shortcuts customizable from the options page. ▸ PRIVACY Naked CSS only reads the element you hover or select. It never captures the rest of your page, never uploads page content, and never asks for an account. Anonymous, opt-out product analytics measure feature usage only — no DOM data, no URLs, no personal information. ▸ FREE & OPEN Free to install. Free to use. No subscription, no paid tier, no upsells. ▸ FAQ Q: Is Naked CSS free? A: Yes — completely free. No accounts, no paid tier. Q: Does it work on every website? A: It works on any page Chrome lets extensions inject into. That excludes chrome:// pages and the Chrome Web Store, but virtually every other site. Q: How is this different from Chrome DevTools? A: DevTools shows you one element at a time. Naked CSS shows you the relationship between two — pixel distance, alignment, padding — drawn directly on the page. Q: Can I customize the keyboard shortcuts? A: Yes. Cmd/Ctrl+I and Esc are defaults; rebind both from the options page. Q: Does it slow down pages? A: No. The overlay is a single SVG layer with pointer-events disabled. Mouse events are throttled with requestAnimationFrame so it never thrashes layout. ▸ INSTALL Click "Add to Chrome." Then press Cmd+I (Mac) or Ctrl+I (Windows/Linux) on any web page to start.

Details & SEO