Screen Ruler
On-screen pixel ruler for measuring elements. Click and drag to measure areas. Toggle between pixels, centimeters, and inches.
Related Tools
About Screen Ruler
A screen ruler is an essential tool for web designers, UI developers, and anyone who needs to measure pixel dimensions on screen. This browser-based ruler provides horizontal and vertical scales with precise measurements.
Click and drag anywhere on the measurement area to create a selection rectangle. The dimensions are displayed in real-time in your chosen unit. The crosshair cursor helps you align measurements precisely.
You can switch between pixels, centimeters, and inches. The DPI setting controls the conversion - most screens use 96 DPI by default. Adjust this value if your measurements don't match physical dimensions.
Frequently Asked Questions
How do I use the screen ruler?
The ruler displays horizontal and vertical pixel markings on screen. Click and drag on the measurement area to create a selection rectangle. The dimensions of your selection are shown in real-time in your chosen unit (px, cm, or inches).
What units are supported?
The screen ruler supports pixels (px), centimeters (cm), and inches (in). You can toggle between units using the unit selector. The conversion uses your screen's DPI for accurate measurements.
How accurate are the cm and inch measurements?
Accuracy depends on your screen's reported DPI. Most screens report 96 DPI. For precise physical measurements, you may need to calibrate by measuring a known object and adjusting the DPI value.
Can I measure elements on other pages?
This tool measures within its own page. To measure elements on other pages, you can use browser developer tools (F12) or resize this window to overlay the target page.
Last updated: June 2026