Everything Screen Ruler offers

Element Inspection

Hover to see size, padding and margins on the page, click to select, and walk up and down the DOM.

Distance Measurement

Select one element and hover another to read the pixel gap between them, top, right, bottom and left.

Page Rulers

Pixel rulers along the top and left of the page with a crosshair that tracks your cursor.

Floating Inspector

Key CSS for any element in a panel that follows your cursor. Press Space to pin and compare.

CSS Selector Search

Type a selector to highlight every match on the page, see the count and step through the results.

Force Element State

Force :hover, :focus or :active on an element to inspect those styles, and pause to interact with menus.

Color Picker

An eyedropper that copies the exact color of any pixel on the page in the format you work in.

Element Screenshots

Save a cropped PNG of any element, with its margin, padding and measurement overlays if you want them.

Inspect Canvas

See a canvas element's context type, real pixel size, pixel ratio and main colors.

Computed CSS

Click any element to see the styles the browser resolved for it, filtered down to the ones that matter.

CSS Rules

See the stylesheet rules behind an element, grouped by file, with media queries and overridden declarations marked.

Generate Tailwind Classes

Convert any element's styles into a Tailwind v4 class string you can copy into your own markup.

Box Shadow Visualizer

Split layered box shadows apart, preview each layer on its own and copy the CSS one layer per line.

Gradient Inspector

Lay out every color stop of an element's gradients on a bar, with exact values and one-click CSS copy.

Animation Inspector

See an element's CSS animations as easing curves, with timing, iteration count and @keyframes you can copy.

Transition Inspector

See an element's transitions as cubic-bezier curves, grouped by timing, with a copyable transition declaration.

Visualize Layout

Turn a flex or grid container's direction, wrapping, alignment and tracks into a diagram with copyable layout CSS.

Layout Grid Overlay

Overlay a column grid with your own columns, gutter, margin and max width to check alignment on any page.

X-Ray Mode

Outline every element on the page at once, colored by nesting depth, to see a layout's structure.

Detect Breakpoints

Find the media query breakpoints a site uses and see each one marked on the page.

Preview Responsive Sizes

See a page at several screen sizes side by side, from device presets, custom sizes or the page's own breakpoints.

Extract Colors

Get every text, background and border color from a page or component, grouped by use and ready to copy.

Analyze Typography

List every type style in a selection, with the rendered font, size, weight and a live specimen.

Extract Assets

Collect images, CSS backgrounds and inline SVGs from a page or component and download them one by one or all at once.

Detect Technologies

See the frameworks, CMS, libraries and analytics a site runs on, with version numbers where they are exposed.

Accessibility Issues

Find text and icons that fail WCAG AA or AAA contrast, with the real ratio and the threshold they missed.

SEO Issues

Flag on-page SEO problems such as title length, a missing H1, missing alt text and absent Open Graph tags.

Page Weight

See how heavy a page is and what makes up the total, from scripts and images to fonts and API calls.

Meta Tags

See a page's title, description, canonical, Open Graph and Twitter Card tags in one copyable block.

Social Preview

Preview a page's share card for Facebook, X and LinkedIn using its own Open Graph tags.

Edit CSS Live

Edit the CSS of any page from the side panel, either the styles an element uses or the real rules behind them.

HTML Editing

Cut, copy, paste, duplicate and delete elements on any page, with undo and a markup diff of every change.

Edit Page Text

Click into any text on a page and rewrite it in place, with every change tracked as a diff.

Edit Tailwind Classes

Edit any element's class list live, with autocomplete from the page's own classes and a diff of every change.

Edit States & Breakpoints

Edit hover, focus and other state styles, and CSS inside media queries, scoped to the right state and breakpoint.

Change Tracking

See every CSS, class, text and HTML edit as a diff you can copy into your code or revert one by one.

Save Edits per Site

Keep your CSS edits across reloads: rule edits are remembered per site and restored when you come back.

MCP Server

Let Claude Code, Cursor and other MCP agents inspect, audit and edit live pages in your browser.