Naked CSS — CSS Inspector, Pixel Ruler & Layout Debugger

Tracking since May 2, 2026.

Changelog

• May 19, 2026
  description

  Naked CSS strips a website to its CSS bones so you can measure, copy, and steal design ideas in seconds.

  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.

• May 19, 2026
  short_description

  Visually measure distances, inspect padding, colors, layout properties, and debug CSS on any web page.

  Measure pixel distance, inspect padding, margins, colors & CSS variables on any element. Free Chrome layout debugger.

• May 19, 2026
  name

  Naked CSS

  Naked CSS — CSS Inspector, Pixel Ruler & Layout Debugger

• May 19, 2026
  host_permissions

  (empty)

  https://us.i.posthog.com/*

• May 8, 2026
  description

  Visually measure distances, inspect design system, extract SVGs and Images, debug CSS and much more with customizable keyboard shortcuts.

  Naked CSS strips a website to its CSS bones so you can measure, copy, and steal design ideas in seconds.

Permissions & access

Permissions

activeTabscriptingstorage

Host access

https://us.i.posthog.com/*

Screenshots