Made to measure.
Built for everything else.

More than just a ruler. Screen Ruler lets you measure elements, inspect their properties, download images, and extract color palettes.

Add to Chrome

4.6 Rating

Trusted by 30,000+ developers worldwide

Features

Inspect elements 3x faster with Screen Ruler

Assets

Download images and SVG assets from selected element.

4 Assets
  • 24x24
    SVG
  • 24x24
    SVG
  • 24x24
    SVG
  • Background image
    1920x1080
    PNG
Animations and Transitions

Transitions and animation inspector with easing curve visualization and CSS.

animation: fadeIn 0.3s ease-in,
slideUp 0.5s ease-out,
scaleIn 0.4s ease-in-out,
rotateIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
Inspect

Quickly inspect important element properties on hover.

Inspect Me!
Layout
padding:
12px 24px
Appearance
border-radius:
8px
background:
#1f1f1f
color:
#ffffff
Text
font-family:
Inter
font-size:
13px
font-weight:
500
Layout Grid

Overlay a layout grid on the page.

  • Layout Grid
Box Shadows

Visualize multi-layer box shadows with an exploded view.

5 Box Shadows
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 1px 3px rgba(0, 0, 0, 0.05),
0 2px 8px rgba(0, 0, 0, 0.1),
0 4px 12px rgba(0, 0, 0, 0.2),
0 8px 25px rgba(0, 0, 0, 0.15);
Find Element

Find and highlight elements by CSS selector.

Find Me!
  • Find Element
Capture Screenshot

Screenshot elements with measurements included.

Capture Me!
Colors

View all colors contained in the selected element as HEX, RGBA or HSL values.

Text
#1F1F1F rgb(31, 31, 31) hsl(0, 0%, 12%)
#374151 rgb(55, 65, 81) hsl(220, 19%, 27%)
#4B5563 rgb(75, 85, 99) hsl(220, 14%, 34%)
#6B7280 rgb(107, 114, 128) hsl(220, 9%, 46%)
#FFFFFF rgb(255, 255, 255) hsl(0, 0%, 100%)
Backgrounds
#FFFFFF rgb(255, 255, 255) hsl(0, 0%, 100%)
#F9FAFB rgb(249, 250, 251) hsl(220, 14%, 98%)
#F3F4F6 rgb(243, 244, 246) hsl(220, 14%, 96%)
#3B82F6 rgb(59, 130, 246) hsl(217, 91%, 60%)
#10B981 rgb(16, 185, 129) hsl(160, 84%, 39%)
#EF4444 rgb(239, 68, 68) hsl(0, 84%, 60%)
#F59E0B rgb(245, 158, 11) hsl(38, 92%, 50%)
#A855F7 rgb(168, 85, 247) hsl(271, 91%, 65%)
#EC4899 rgb(236, 72, 153) hsl(328, 81%, 60%)
#14B8A6 rgb(20, 184, 166) hsl(173, 80%, 40%)
Borders
#00000020 rgba(0, 0, 0, 0.12) hsla(0, 0%, 0%, 0.12)
#E5E7EB rgb(229, 231, 235) hsl(220, 13%, 91%)
#D1D5DB rgb(209, 213, 219) hsl(220, 13%, 84%)
#9CA3AF rgb(156, 163, 175) hsl(220, 14%, 65%)
#FFFFFF26 rgba(255, 255, 255, 0.15) hsla(0, 0%, 100%, 0.15)

Reviews

Built for web professionals

sin OS

Perfect for web design. Shows properties, elements, measurements, containers and much much more. I love this app so much. Saved me hours of work and guess work.

@adamschroder

This tool is simply fantastic.

Misha Vs

This is the best on-screen roulette/ruler available in the Chrome Store.

Richard Brus

A beautiful little tool. It also feels so light and snappy in the browser. It is so much more than a ruler. An invaluable piece of my workflow when designing sites.

André Cavallari

One of most useful front-end extensions. I recommend it to every developer.

@star_boat

Screen Ruler is exactly what every web developer and designer needs!

Dave Mejias

This extension is incredible.

Manuel Avella-Salazar

Fast. Clear UI. No unnecessary bells and whistles. After 5 minutes I switched to the pro version. Great, fine tool.

Robert Thomas

This is a total game changer for web devs. Can't wait to measure all the things!

Upgrade your workflow

Ready to go beyond just basic measuring?

Add to Chrome