SpecSnap — Design Inspector

Inspect fonts, spacing and colors, copy CSS or Tailwind, sample pixels, and grab SVGs and images in one click.

Hover any element on any website and instantly see how it's built: font, size, line-height, color, padding, margin and radius, in a clean HUD that stays out of your way. SpecSnap is a fast, lightweight design inspector for designers and front-end developers. Press Alt+X (Option+X on Mac), hover, click, copy. No DevTools, no digging through stylesheets. ━━━━━━━━━━━━━━━━━━━━ WHAT YOU CAN DO ◆ Inspect on hover See typography, colors and the full box model for any element. Margin and padding are highlighted right on the page. ◆ Copy clean CSS Click to lock an element, then copy a tidy, minified CSS rule with only the properties that matter. Colors come out as hex. ◆ Copy Tailwind classes (Pro) Turn any element's styles into Tailwind utility classes. Spacing, font sizes, weights and the default color palette are mapped to real class names, with arbitrary values where there's no exact match. ◆ Grab SVGs and images Copy raw SVG markup with its colors baked in, so it renders the same outside the page. Or download the original image or background image (Pro). ◆ Eyedropper Sample any pixel on your screen and the hex value is copied straight to your clipboard. ◆ Page palette See the six dominant colors of any page in one click and copy any hex value. ━━━━━━━━━━━━━━━━━━━━ PRICING - Free: 10 element inspections every day, plus hover inspection, CSS copy, SVG copy, eyedropper and palette. - Pro: $9.99 one-time payment for unlimited inspections, Tailwind export and asset downloads, for life. No subscription. Payments are handled securely by ExtensionPay and Stripe. Already paid on another browser? Use "Restore access". ━━━━━━━━━━━━━━━━━━━━ BUILT TO STAY OUT OF YOUR WAY - Only runs when you activate it, on the tab you activate it on. - Its interface is fully isolated from the page, so it never breaks the site's layout or styles. - While inspecting, clicks lock elements instead of following links. Press Esc and the page works exactly as before. - No tracking, no analytics, no data collection. Nothing you inspect ever leaves your browser. ━━━━━━━━━━━━━━━━━━━━ SHORTCUTS Alt+X (Option+X on Mac): toggle the inspector Click: lock an element and show copy actions Esc: unlock, then exit You can change the shortcut at chrome://extensions/shortcuts. Note: Chrome doesn't allow extensions to run on chrome:// pages, the Chrome Web Store or other internal browser pages.