Tracepaper: Pixel Perfect Overlay, Ruler, Color Picker & CSS Inspector

Overlay designs, measure spacing, add guides, pick colors and identify fonts on any page. Free, no limits, no tracking.

The design-QA toolbox for front-end developers. Check that a page matches its design, pixel for pixel, with one small toolbar instead of six extensions. Every tool has a one-key shortcut, the toolbar can be dragged anywhere, and it follows your light or dark theme. FREE, WITH NO LIMITS (and it stays that way) • Overlay (O): put your Figma, Sketch, XD or Photoshop export over the live page. Unlimited layers, opacity, exact X/Y, arrow-key nudging, automatic @2x/@3x scaling • Difference mode: matching pixels turn black, so only the mistakes light up • Match window: one click resizes the browser to your design's exact width • Measure (M): hover any element for its exact size; click one and hover another for the distance between them; hold Alt for spacing to the parent; drag to measure any area; arrow keys walk to the parent, child or sibling. Works inside web components (shadow DOM) too • Rulers & guides (G): drag guides out of the rulers; they snap to element edges, show the distance to their neighbours, take exact values, and are saved per page. Pick their color • Color picker (C): a pixel-level magnifier. Every click copies the color (HEX, RGB, HSL or OKLCH) and keeps it in a history strip. Pick as many as you like without reopening anything • Fonts (F): hover text to see the font that is actually rendered (not just the first name in the CSS), plus size, weight, line height, spacing and color. Pin cards to compare and copy TRACEPAPER PRO • CSS inspector (I): box model, every key style, and Copy CSS in one click • Measure between any two elements right from the inspector • 7-day free trial. $4.99/month, $39/year, or $79 once RESPECTS YOUR BROWSER • Runs only on the tab where you click it. No "read and change all your data" permission • No tracking, no ads, nothing injected into the sites you visit • Never edits the page's HTML; its UI is isolated from the page's CSS • Works on localhost and local files, where you actually build HOW TO USE 1. Open the page you are building and click the Tracepaper icon (or press Alt+Shift+P). 2. Pick a tool from the toolbar, or press its key: O overlay, M measure, G guides, C color, F fonts, I inspect. 3. Esc steps back; ? shows every shortcut.