Measurement & Calibration
Digital Pixel Ruler & Box Measurement
Click and drag anywhere on the canvas below to measure width, height, diagonal pixel distance, and angle. Perfect for UI design, front-end alignment, and screen geometry inspection.
|DPR:1x
Width
0 px
0.0 mm
Height
0 px
0.0 mm
Diagonal Distance
0 px
0.0ยฐ
Area
0 pxยฒ
Bounding Area
Cursor (X, Y)
0, 0
Viewport relative
๐
Click and drag anywhere to measure
Shows width, height, diagonal line, and angle in real time
๐ Physical Ruler vs. Pixel Ruler
Physical Screen Ruler measures real-world millimeters, centimeters, and inches based on physical panel size calibration (e.g. credit card test).
Digital Pixel Ruler measures exact logical screen pixels (CSS px) and hardware device pixels (DPR multiplier) for web development, graphic design, and UI layout inspection.
๐ก Keyboard Shortcuts & Tips
- Hold Shift: Lock selection to a perfect square (1:1 aspect ratio).
- Grid Snap: Enable "Snap to 10px Grid" above to measure in neat multiples of 10px.
- Copy Dimensions: Click the copy button to instantly paste formatted dimensions (`Width ร Height px`) into your code or notes.