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)
Typography Styles

Analyze and extract all typography styles used in your selection.

5 Typography Styles
Google Sans 96px 475
Google Sans sample
Google Sans 24px 475
Google Sans sample
Google Sans Text 22px 400
Google Sans Text sample
Google Sans Text 16px 400
Google Sans Text sample
Google Sans Text 16px 500
Google Sans Text sample
X-Ray Mode

Reveal the underlying structure of the page with X-ray mode.

X-Ray Me!

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