Pixel-perfect
design overlays

Save multiple overlay states per domain. Switch between pages to compare layouts or work on different sections.

Horizontal and vertical guide lines. Drag to reposition, double-click to remove. Horizontal guides can be pinned to the viewport or set to scroll with the page.

Full-viewport dashed crosshair following your cursor. Click anywhere to set a zero origin; coordinates then display as delta from that point.

Resizable measurement rulers. Drag edges to move, corners to resize. Live dimensions shown below the selection.

Pixel-level zoom from 1.25x to 10x with a pixel grid. Alt+click to copy the hex color under the cursor.

Dot grid overlay with configurable spacing and opacity. Verify alignment at a glance.

Vertical column guides. Configurable count, gap, width, and opacity. Matches 12-col systems.

Horizontal row guides for a full two-dimensional grid system alongside vertical columns.

Upload and overlay any image. Drag to reposition, adjust opacity, pin to viewport or let it scroll with the page.

Screenshot the page and overlay it with adjustable opacity. Switch between normal, invert, and grayscale filters. Toggle visibility to quickly compare before/after without losing the capture.

Lock all elements in place. Prevents accidental moves while you work on the underlying page.

Toggle all overlays on/off with a single click. Clean view whenever you need it.

Export the active page as JSON. Import to create a new page — existing pages are never overwritten. Share setups across your team.