Inspect elements, measure distances, edit pages, and validate designs. Built for developers and designers.
Add to ChromeTrusted by 50,000+ developers and designers, including teams at:
The all-in-one platform that automates your stack, aligns your team, and powers compounding growth at scale.
.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);}
Get started for free
display: flex;align-items: center;gap: 10px;
background-image: radial-gradient(circle at 20% 20%, #FFFFFFCC 0%, #00000000 50%);
background-image: linear-gradient(135deg, #667EEA, #764BA2);
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;
/* SEO */<title>Acme — Trusted by teams worldwide sit amet</title><meta name="description" content="Trusted by teams worldwide sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." /><link rel="canonical" href="https://acme.example/" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />/* Open Graph */<meta property="og:title" content="Acme — Trusted by teams worldwide sit amet" /><meta property="og:description" content="Trusted by teams worldwide sit amet consectetur adipiscing elit." /><meta property="og:image" content="https://placehold.co/1200x630/cccccc/999999?text=Acme" /><meta property="og:type" content="website" />/* Twitter Card */<meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="Acme — Trusted by teams worldwide sit amet" /><meta name="twitter:description" content="Trusted by teams worldwide sit amet consectetur adipiscing elit." /><meta name="twitter:image" content="https://placehold.co/1200x630/cccccc/999999?text=Acme" />
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;}
Made to Measure
Built for Everything Else
/* SEO */<title>Screen Ruler - Inspect Elements, Measure CSS & Extract Assets in Chrome</title><meta name="description" content="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." />/* Open Graph */<meta property="og:title" content="Screen Ruler - Inspect Elements, Measure CSS & Extract Assets in Chrome" /><meta property="og:image" content="https://www.screen-ruler.com/images/og-image.png" />/* Twitter Card */<meta name="twitter:card" content="summary_large_image" />
Google Fonts
Tailwind CSS
React
Next.js
Vercel
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;}
Add to Chrome
display: flex;justify-content: center;align-items: center;gap: 8px;
transition: opacity 0.15s ease;
/* SEO */<title>Screen Ruler - Inspect Elements, Measure CSS & Extract Assets in Chrome</title><meta name="description" content="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." /><link rel="canonical" href="https://www.screen-ruler.com/" /><meta name="viewport" content="width=device-width, initial-scale=1" />/* Open Graph */<meta property="og:title" content="Screen Ruler - Inspect Elements, Measure CSS & Extract Assets in Chrome" /><meta property="og:description" content="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." /><meta property="og:image" content="https://www.screen-ruler.com/images/og-image.png" /><meta property="og:url" content="https://www.screen-ruler.com/" /><meta property="og:type" content="website" />/* Twitter Card */<meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="Screen Ruler - Inspect Elements, Measure CSS & Extract Assets in Chrome" /><meta name="twitter:description" content="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." /><meta name="twitter:image" content="https://www.screen-ruler.com/images/og-image.png" />
Google Fonts
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
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
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.
