Measure, Inspect, and Edit Anything on the Web

50,000+ users worldwide

Measure, Inspect, and Edit Anything on the Web

Inspect elements, measure distances, edit pages, and validate designs. Built for developers and designers.

Add to Chrome

Trusted by 50,000+ developers and designers, including teams at:

Now Live: Multiplayer workspaces

Build like never before. Ship what feels impossible.

h1.hero-title

Box Model

width:

720px

height:

100.8px

display:

block

box-sizing:

border-box

Appearance

color:

#1F1F1F

Text

font-family:

Geist

font-size:

48px

font-weight:

500

line-height:

1.05

letter-spacing:

\-0.96px

text-align:

center

Accessibility

contrast:

16.1

AAA

The all-in-one platform that automates your stack, aligns your team, and powers compounding growth at scale.

Start Your Journey

a.hero\_\_cta

245 × 53

Columns

Max Width

Gutter

Margin

Color

Opacity

CSS Selector

* Select Parent * Select Child * Inspector * X-Ray Mode * Layout Grid * Page Rulers * Breakpoints * Edit Text * Copy * Paste * Duplicate * Delete * Undo * Redo * Color Picker * Find Element * Capture Screenshot * Responsive Mode * Toggle Side Panel * Pause * Quit * Show Dock * Hide Dock * Inspect * Edit

section.hero
a.hero\_\_cta

Margin

Border

Padding

193 × 22.5

a.hero__cta {

width: 245px;

height: 52.5px;

margin: 0px 0px 56px;

padding: 15px 26px;

display: flex;

gap: 10px;

align-items: center;

box-sizing: border-box;

border-radius: 999px;

background: #D4D4D4;

font-size: 15px;

font-family: Outfit, system-ui, sans-serif;

font-weight: 500;

text-align: center;

line-height: 1.5;

color: #1A1A1A;

}

.hero__cta {

display: inline-flex;

align-items: center;

gap: 8px;

padding: 16px 28px;

border-radius: 999px;

background: var(--primary);

color: var(--background);

font-weight: 500;

transition: background 0.2s ease;

}

.hero__cta::after {

content: "→";

transition: transform 0.2s ease;

}

.hero__cta:hover {

background: var(--accent);

}

.hero__cta:hover::after {

transform: translateX(2px);

}

w-[245px] h-[52.5px] mx-[0px] mt-[0px] mb-[56px] px-[26px] py-[15px] flex gap-[10px] items-center box-border rounded-[999px] bg-[rgb(212,212,212)] text-[15px] font-[family-name:Outfit,_system-ui,_sans-serif] font-[weight:500] text-center leading-normal text-[rgb(26,26,26)]

Get started for free

start

end

start

end

display: flex;

align-items: center;

gap: 10px;

Text

#000000rgb(0, 0, 0)hsl(0, 0%, 0%)hsb(0, 0%, 0%)

Backgrounds

#FFFFFFCCrgba(255, 255, 255, 0.8)hsla(0, 0%, 100%, 0.8)hsba(0, 0%, 100%, 0.8)

#00000000rgba(0, 0, 0, 0)hsla(0, 0%, 0%, 0)hsba(0, 0%, 0%, 0)

#667EEArgb(102, 126, 234)hsl(229, 76%, 66%)hsb(229, 56%, 92%)

#764BA2rgb(118, 75, 162)hsl(270, 37%, 46%)hsb(270, 54%, 64%)

#FFFFFFCC @ 0%

#00000000 @ 50%

background-image: radial-gradient(circle at 20% 20%, #FFFFFFCC 0%, #00000000 50%);

#667EEA @ 0%

#764BA2 @ 100%

background-image: linear-gradient(135deg, #667EEA, #764BA2);

Geist 48px 600 | \-0.96px

Geist 18px 500

Geist 16px 400

box-shadow: #0000000F 0px 48px 96px 0px,

#0000000D 0px 24px 48px 0px,

#0000000A 0px 12px 24px 0px,

#00000008 0px 4px 8px 0px,

#00000005 0px 1px 2px 0px;

transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55),

opacity 0.3s ease-in,

filter 0.4s ease-out,

width 0.5s ease-in-out,

height 0.5s ease-in-out 0.1s;

svg20×20

p.very-transparent

Text has insufficient contrast ratio of 2.85:1 (requires 4.5:1 for normal text)

Increase contrast to at least 4.5:1 for WCAG AA compliance

p.transparent-on-colored

Text contrast 6.4:1 meets AA but not AAA (requires 7:1 for normal text)

Consider increasing contrast to 7:1 for WCAG AAA compliance

Acme — Trusted by teams worldwide sit amet

Trusted by teams worldwide sit amet consectetur adipiscing elit.

/ SEO /

<title>Acme — Trusted by teams worldwide sit amet</title>

/ Open Graph /

/ Twitter Card /

25.3 KB

Document

Stylesheets

#### Click an Element to Select

Toggle Extension⌥⇧SUndo⌘ZRedo⇧⌘ZCopy⌘CPaste⌘V

#### No changes found

section.hero
h1.hero-title

Margin

Border

Padding

771.367 × 151.188

h1.hero-title {

width: 771.367px;

height: 151.188px;

display: block;

box-sizing: border-box;

font-size: 72px;

font-family: Geist, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, Arial, sans-serif;

font-weight: 500;

text-align: center;

line-height: 1.05;

color: #1F1F1F;

letter-spacing: -1.44px;

}

w-[771.367px] h-[151.188px] block box-border text-[72px] font-[family-name:Geist,system-ui,-apple-system,"system-ui","Segoe_UI",_Roboto,_Arial,_sans-serif] font-[weight:500] text-center leading-[1.05] text-[rgb(31,31,31)] tracking-[-1.44px]

Made to Measure Built for Everything Else

Text

#1F1F1Frgb(31, 31, 31)hsl(0, 0%, 12%)hsb(0, 0%, 12%)

Geist 72px 500 | \-1.44px

www.screen-ruler.com

Screen Ruler - Inspect Elements, Measure CSS & Extract Assets in Chrome

Chrome extension to inspect elements, measure pixel distances, extract colors and assets, view computed CSS, and validate designs. Used by 50,000+ developers and designers.

/ SEO /

<title>Screen Ruler - Inspect Elements, Measure CSS & Extract Assets in Chrome</title>

/ Open Graph /

/ Twitter Card /

1.08 MB

Document

Scripts

Stylesheets

Images

Google FontsTailwind CSS React React Next.js Next.js Vercel Vercel

<title>

Title is longer than 60 characters

Search engines may truncate long titles. Shorten to 50 to 60 characters.

Description is longer than 160 characters

Search engines may truncate long descriptions. Trim to 120 to 160 characters.

#### Click an Element to Select

Toggle Extension⌥⇧SUndo⌘ZRedo⇧⌘ZCopy⌘CPaste⌘V

#### No changes found

section.hero
a.hero\_\_cta

Margin

Border

Padding

154.117 × 56

a.hero__cta {

width: 226.117px;

height: 56px;

padding: 0px 36px;

display: flex;

gap: 8px;

align-items: center;

justify-content: center;

box-sizing: border-box;

border-radius: 100px;

background: #EEEEEE;

font-size: 18px;

font-family: Geist, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, Arial, sans-serif;

font-weight: 500;

text-align: center;

line-height: 1.5;

color: #0D0D0D;

}

w-[226.117px] h-[56px] px-[36px] py-[0px] flex gap-[8px] items-center justify-center box-border rounded-[100px] bg-[rgb(238,238,238)] text-[18px] font-[family-name:Geist,system-ui,-apple-system,"system-ui","Segoe_UI",_Roboto,_Arial,_sans-serif] font-[weight:500] text-center leading-normal text-[rgb(13,13,13)]

Add to Chrome

start

end

start

end

display: flex;

justify-content: center;

align-items: center;

gap: 8px;

Text

#0D0D0Drgb(13, 13, 13)hsl(0, 0%, 5%)hsb(0, 0%, 5%)

Backgrounds

#EEEEEErgb(238, 238, 238)hsl(0, 0%, 93%)hsb(0, 0%, 93%)

Geist 18px 500

transition: opacity 0.15s ease;

svg20×20

www.screen-ruler.com

Screen Ruler - Inspect Elements, Measure CSS & Extract Assets in Chrome

Chrome extension to inspect elements, measure pixel distances, extract colors and assets, view computed CSS, and validate designs. Used by 50,000+ developers and designers.

/ SEO /

<title>Screen Ruler - Inspect Elements, Measure CSS & Extract Assets in Chrome</title>

/ Open Graph /

/ Twitter Card /

297.7 KB

Document

Scripts

Stylesheets

Images

2 cross-origin resources hidden

Google Fonts

<title>

Title is longer than 60 characters

Search engines may truncate long titles. Shorten to 50 to 60 characters.

Description is longer than 160 characters

Search engines may truncate long descriptions. Trim to 120 to 160 characters.

#### Click an Element to Select

Toggle Extension⌥⇧SUndo⌘ZRedo⇧⌘ZCopy⌘CPaste⌘V

display: inline-flex;

align-items: center;

justify-content: center;

gap: 8px;

height: 56px;

padding: 0px 36px;

background: var(\--primary);

color: var(\--background);

font-family: var(\--font-sans);

font-size: 18px;

font-weight: 500;

border-radius: 100px;

text-decoration: none;

transition: opacity 0.15s;

margin: 0px;

box-sizing: border-box;

font-size: 16px;

padding: 12px 28px;

font-size: 15px;

padding: 12px 24px;

1 cross-origin stylesheets hidden. Some styles may be missing. Grant access.

#### No changes found

Measure Inspect Edit

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.

sin OS - Chrome Web Store Review

Everything You Need

Element Inspection. View sizes, margins, paddings, tag names, IDs, and classes by hovering over any element.

Distance Measurement. Select an element to measure pixel distances between it and other elements on the page.

Computed CSS. View and copy the computed CSS properties of any selected element directly to your clipboard.

Page Rulers. Horizontal and vertical guides with crosshair for precise measurements across the viewport.

Color Picker. Sample and copy colors from anywhere on the page using the built-in eyedropper tool.

Parent/Child Selection. Navigate element hierarchy with keyboard shortcuts to select parent or child elements.

Element Screenshots. Capture cropped screenshots of selected elements with margins and measurements included.

Accessibility Issues. Automatically detect and highlight WCAG contrast failures with actionable recommendations.

SEO Issues. Catch common SEO problems like missing titles, multiple H1s, missing alt text, and absent meta tags.

Meta Tags. Inspect SEO, Open Graph, and Twitter card meta tags grouped by category in the side panel.

Social Preview. Preview how your page renders when shared on Facebook, X, and LinkedIn using the page's actual metadata.

And More. Pause inspection, keyboard shortcuts, dark mode support, and continuous updates.

This consolidates multiple extensions into one powerful tool. As a web designer, I can't express just how happy I am that this replaces my need for several standalone browser extensions.

Victor Chinedu - Gumroad Review

Go Beyond Measuring With

Screen Ruler Pro

Pricing

Live CSS Editing with Change Tracking. Edit any element's CSS in the side panel. Every change is tracked in a per-element diff view, so you can copy or revert with one click.

HTML & Text Editing. Copy, paste, duplicate, or delete elements directly on the page. Text editing mode lets you rewrite page copy in place.

Asset Extraction. Extract and download images, SVGs, and vector assets directly from any webpage.

Responsive Mode. Test designs across different device viewports with an interactive device emulator and custom dimensions.

Floating Inspector. Detailed element properties on hover. Press Space to pin inspectors and compare multiple elements side by side.

Color Extraction. Extract and copy color palettes from selected elements with hex, RGB, and HSL values.

Typography Analysis. Analyze and extract all typography styles used in your selection.

Technology Detection. Identify the frameworks, libraries, and tools powering any website with over 180 technologies supported.

Layout Grid Overlay. Overlay a customizable column grid for checking design alignment and spacing.

Box Shadow Visualization. Interactive breakdown of multi-layer box shadows with exploded view of each shadow component.

Animation Analysis. Visualize CSS animation timing curves and copy animation CSS properties.

CSS Selector Search. Find and highlight elements using CSS selectors to quickly locate specific elements.

X-Ray Mode. Reveal the underlying structure of the page by outlining all elements at once.

Tailwind CSS Generator. Instantly convert any element's computed styles into Tailwind utility classes.

CSS Rules Inspector. View the CSS rules from stylesheets that apply to any element, grouped by source file.

Transition Inspector. Visualize CSS transitions and timing function curves alongside animations.

Canvas Inspection. Inspect HTML5 Canvas elements. View dimensions, context types, and extract color palettes.

Layout Inspection. Visualize Flexbox and Grid layouts with a clear breakdown of alignment, direction, and structure.

Gradient Visualization. Inspect and visualize CSS gradients with a detailed breakdown of color stops and direction.

Breakpoints. Detect and visualize CSS media query breakpoints with colored boundary lines directly on the page.

Page Weight. See exactly what's loaded on any page, broken down by scripts, stylesheets, images, fonts and more.

Install Screen Ruler for Free

Add to Chrome

Measure, Inspect, and Edit Anything on the Web

Measure, Inspect, and Edit Anything on the Web

Measure, Inspect, and Edit Anything on the Web

Everything You Need

Go Beyond Measuring With

Install Screen Ruler for Free

Comments (0)