Screen Ruler
Drag a horizontal or vertical ruler on screen to measure distances in pixels with optional zoom calibration.
Measure pixel distances on screen
Designers and QA testers often need quick pixel measurements between UI elements. Enter start and end coordinates in CSS pixels, adjust calibration if your browser zoom differs from 100 percent, and read the span on a live ruler preview.
Calibration tips
CSS pixels are logical units. If your display scaling or browser zoom is not 100 percent, lower or raise the calibration percentage until the preview matches a known reference on your layout.
Related design tools
Preview breakpoints with the Responsive Breakpoint Tester, style scroll areas with the Scrollbar Styler, and pick colors with the Color Picker.
Frequently Asked Questions
Are these physical inches?
No. The tool reports CSS pixel distance. Calibration only adjusts for zoom, not monitor DPI.
Can I measure vertical spacing?
Yes. Switch the preview orientation to vertical and use the same start and end values.
What is a good preview length?
Match the preview length to the area you are measuring so tick marks align with your layout width or height.
Related Tools
Sleep Debt Calculator
Langmuir Isotherm Calculator
EORTC Bladder Cancer Calculator
Color Visualizer
Cat Quality of Life Calculator
Weighted Average Calculator
Gif Viewer
Fletcher Checksum
React Native Shadow Generator
Happiness Calculator
Base64 to CSV Converter
TOML to XML Converter
GraphQL To TypeScript
WCAG Contrast Pair Finder
Calorie Calculator
Add Stroke to Image
Fluid Ounces to Pounds Converter
Excel to CSV
Color Converter
Calories Burned Standing Calculator