Is the pixel ruler free?

Yes. Free in your browser with a daily quota for guests and unlimited exports for Pro users.

Are the measurements real pixels?

They are real CSS pixels of the element as rendered on your screen, which is what matters for web layouts. They are not the source image file's pixels.

Can I measure my own screenshot?

Yes. Upload any image and it fills the canvas; all tools (crosshair, drag measure, guides, grid) work on it.

Add horizontal or vertical guides, drag them into position, and double-click any guide to remove it. Each guide shows its pixel position.

What is in the JSON export?

Every measurement with its from/to coordinates, distance, dx and dy, plus all guide positions and the image name.

Does my uploaded image leave my device?

No. The image is loaded into a local object URL and never transmitted anywhere.

Pixel Ruler - Free Online Design Tool | IconVault

Measure anything on screen in real pixels: crosshair, drag measurements, draggable guides and grid overlay. Free.

All tools

Pixel Ruler

On-screen measuring with crosshair, guides and grid

5 of 5 free uses left

Grid overlay

Guides

Drag guides to move. Double-click a guide to remove it.

Measurements (0)

Drag on the canvas to measure.

Distances are real CSS pixels of the element on your screen, not the source image file.

Drag anywhere to measure

About this tool

IconVault's Pixel Ruler turns your browser into a measuring tool. Move the crosshair for live X/Y coordinates, drag to measure any distance in real CSS pixels, drop draggable guides (double-click to remove), and toggle a grid overlay with adjustable size. Upload your own image or measure on the built-in test pattern. Completely free and runs fully in your browser.

Every measurement is listed with its endpoints and distance, and you can export everything as JSON for specs and handoff docs. Rulers along the top and left edges keep you oriented, and nothing you upload ever leaves your device.

Frequently asked questions

Popular searches

pixel ruleron screen rulerpixel ruler onlinemeasure pixels on screenscreen measuring toolcrosshair rulerweb pixel rulermeasure distance on imageimage measurement toolpixel measurement onlineruler tool for designersmeasure website pixelsscreenshot measure tooldrag to measure pixelsguide lines toolpixel guidesgrid overlay toolmeasure ui elementsdesign measurement toolfigma measure alternativecheck spacing pixelselement size checkercss pixel rulerscreen ruler chromeon-screen measuringphoto measure pixelsimage dimension toolruler overlaycoordinate pickerx y coordinate toolweb design rulerfrontend measuring toolspacing checkeralignment checker toolmeasure mockupdesign spec toolhandoff measurementexport measurements jsonfree screen rulerno install rulerbrowser rulermeasure anything on screenpixel perfect checkerui spacing toollayout measurementruler for screenshotsmeasure image onlinedimension overlaydesign qa toolpixel distance calculator

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →

Pixel Ruler - Free Online Design Tool | IconVault

Pixel Ruler

About this tool

Frequently asked questions

Popular searches

More tools

Font Pairing

Font Preview

Glassmorphism Generator

Gradient Text

Coming soon