Content is loading…
Measure screenshots with rulers, guides & a pixel loupe.
Screen Ruler & Pixel Magnifier measures distances inside any uploaded image or screenshot: edge rulers with ticks, drag-to-measure with dx/dy/distance, draggable guides, and a magnifier loupe up to 32× that samples live hex colors under the cursor. Readouts in px, rem and percent.
Measure anything in an image or screenshot with pixel precision. Drop a screenshot and get edge rulers with labeled ticks, drag-to-measure with dx, dy and distance readouts, draggable guides, and a powerful magnifier loupe (up to 32×) with a pixel grid and live hex color sampling. Readouts in px, rem and percent — perfect for designers checking spacing, developers matching specs, and pixel artists. Everything runs locally; screenshots never leave your device.
Screen Ruler & Pixel Magnifier provides precise pixel-level measurement directly in the browser without requiring desktop software installations or user accounts. It processes images locally to ensure privacy while offering essential design inspection features such as edge rulers, drag-to-measure coordinates, a 32x magnifier loupe, and live hex color sampling.
Good to know: Because it relies on uploaded images and client-side processing, it is tailored for static screenshots rather than live browser window inspection or automated design system auditing.
Learn how to precisely measure elements, inspect colors, and check pixel dimensions in any screenshot.
Upload your screenshot or image
Drag and drop or upload your target image into the tool to begin measuring. Everything runs locally in your browser for privacy.
Inspect details with the pixel loupe
Hover over the image using the magnifier loupe set up to 32× zoom. View the pixel grid and copy live hex color codes instantly.
Measure distances with edge rulers
Use the edge rulers with labeled ticks to inspect alignment and spacing across your uploaded design or screenshot.
Drag to measure specific dimensions
Click and drag across any area of the image to get immediate dx, dy, and total distance readouts.
Export measurements in your units
View your final readouts in pixels, rem, or percent to easily verify design specs and spacing.
Estimated time: PT2M
Share this tool
Eyedrop colors from any image — HEX, RGB, HSL.
Preview any URL across multiple device sizes — phone, tablet, laptop, TV and more.
Convert colors between HEX, RGB, and HSL formats.
Design custom CSS border radius shapes with live preview.
Remove whitespace and comments to minify CSS code.
Visually build CSS gradients and copy the CSS output.
Upload an image and get all favicon sizes + HTML link tags.
Generate custom placeholder images with any size, color, and text.
Extract dominant colors from any image and export as HEX, RGB, HSL, CSS, or JSON.
Visually create CSS box shadows with live preview and one-click copy.
Convert text or Markdown to a Word .docx file with live preview, RTL, and page-setup options.
Draw a Secret Santa with exclusions and share a private reveal link for each person.
Make custom bingo cards from your own words — play, print, or share a link.
Convert images to video with the Ken Burns zoom/pan effect. Add music and export as WebM.
Load and compare multiple URLs side by side in resizable iframes.
Rank anything with quick 1-v-1 matchups → a full ordered list you can share.
Convert Markdown to a fully customized, RTL-ready PDF.
See your public IP address plus full location, ISP, ASN, timezone, coordinates, and more.
