Herramientas Guías
Developer Gratis Sin registro

Screen Ruler

On-screen pixel ruler with draggable guides and measurement pins for design work.

Cargando la herramienta…

Acerca de esta herramienta

A transparent overlay ruler that lives at the edges of your browser window. The horizontal ruler sits at the top and the vertical ruler on the left, both showing pixel coordinates scaled by the device's pixel ratio for DPI-aware measurements. Drag either ruler to reposition it. Click anywhere on the page to drop a measurement pin that shows its exact X/Y coordinate distance from the ruler origin. Drag from either ruler to spawn infinite horizontal or vertical guide lines — the same workflow designers use in Figma or Photoshop — to align and measure elements on any page.

Cómo usar

  1. 1 Open the tool and the horizontal and vertical rulers appear automatically.
  2. 2 Drag from the horizontal ruler downward to create a horizontal guide line.
  3. 3 Drag from the vertical ruler rightward to create a vertical guide line.
  4. 4 Click anywhere on the canvas to drop a pin showing its pixel coordinates.
  5. 5 Drag any guide line to reposition it; drag it back to the ruler to delete it.
  6. 6 Double-click a ruler to reset it to its default edge position.

Preguntas frecuentes

{# Alpine.js — self-hosted. (The previous jsdelivr CDN tag had a stale SRI integrity hash, so the browser refused to run it and window.Alpine was never defined — silently breaking every FAQ accordion and Alpine tool.) #}