On-screen pixel ruler to measure anything on the page. Horizontal and vertical guides with draggable positioning.
Click to place the ruler on screen for measurement.
Drag to measure width, height, or distance in pixels.
See the exact pixel dimensions displayed on the ruler.
The Screen Ruler overlays the page with horizontal and vertical rulers you can drag into position, then reads the pixel distance between them so you can measure any element you can see: a card's width, the gap between two buttons, the height of a hero section. It measures what is actually rendered, not what the CSS declares. The surprise most people hit: it counts CSS pixels, the same unit the browser's own layout uses, so on a retina display your physical screen may be 3,024 pixels wide while the ruler reports roughly half that, and zooming the page changes every reading.
A concrete input and expected output from the current implementation.
Input
Place the vertical guide at the left edge of a content column (x = 100) and drag the second vertical guide to the column's right edge (x = 640).
Expected output
540 px. The span between guide positions at 640 and 100 is 640 - 100 = 540.
The readout is the difference between the two guide positions, so a column spanned by guides at 100 and 640 measures 540 CSS pixels wide.
Drag the horizontal guide and the vertical guide to the edges of whatever you want to measure; the readout shows the distance between the guide positions in CSS pixels. Both guides move independently, so you can take a width and a height from the same spot, and the readout updates continuously as you drag, letting you settle on the exact edge before reading.
Measurements are reported in CSS pixels, the unit the page's own layout uses and the unit browser developer tools display. A guide dragged across the full window therefore reads the window's CSS width, not the monitor's physical resolution, and any browser zoom scales what you measure along with the page: at 125% zoom, a 400 px element renders 500 px wide and the ruler says so.
It measures CSS pixels, the unit the page's layout uses, not the physical pixels of your display. On a retina MacBook the window's CSS width is typically about half the panel resolution, and developer tools report the same numbers. To get physical pixels, multiply the reading by the device pixel ratio (window.devicePixelRatio).
Usually one of three things: the browser is zoomed, so the rendered size differs from the declared width (set zoom to 100%); the element sits inside a transform: scale() or zoomed container, so its rendered size genuinely differs from its CSS width; or your guides include padding or borders that the devtools value excludes. Check the computed style to see which it is.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Create customizable checklists with groups, due dates, and priorities for any project.
Design a printable daily planner with time blocks, goals, and priority sections.
Measure your typing speed in WPM and accuracy with real-time feedback and stats.
Pomodoro timer with built-in ambient noise (rain, cafe, forest) generated via Web Audio API oscillators.
Stay focused with a customizable Pomodoro timer featuring work and break intervals.
A precise stopwatch with lap tracking, split times, and exportable results.