CSS inspector for computed styles

Click any element on a page and see the CSS the browser is actually using to draw it, as a short, clean block you can copy. No DevTools, no digging through hundreds of properties.

What it shows

Select an element and the Code section of the side panel's Element tab shows its computed CSS: the final values after every stylesheet, inline style and inherited value has been resolved. Instead of the full list of several hundred properties that DevTools shows, Screen Ruler picks the ones that describe how the element looks and sits on the page:

• Size and box model: width, height, margin, padding, border, border-radius and box-sizing.
• Layout: display, plus gap, alignment and grid templates on flex and grid containers, and position with its offsets when the element is positioned.
• Background and effects: the background shorthand (including gradients and images), box-shadow, filter and backdrop-filter.
• Typography: font-family, font-size, font-weight, font-style, line-height, letter-spacing, color, text-align, text-decoration and white-space.

When the element has a ::before or ::after pseudo-element with content, its styles appear as their own blocks underneath.

How to see an element's computed styles

1. Open the page you want to inspect.
2. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
3. Hover over the page and click the element you want. Use Alt + Shift + Up or Down to move to the parent or first child if you landed on the wrong layer.
4. In the side panel, open the Element tab and look at the Code section. The dropdown in its header reads Computed.
5. Click the copy button under the block to copy the CSS.

Press Esc to release the selection and pick something else.

Cleaned up so it reads like real CSS

Raw computed styles are noisy. Screen Ruler tidies them before showing them, so the block is closer to what a person would write:

• Defaults are dropped. Zero margins and padding, position: static, font-style: normal, an empty background and similar default values are left out.
• Line height becomes a ratio. A computed line-height of 24px on 16px text shows as 1.5.
• Repeated grid tracks are folded. Three equal columns show as repeat(3, 200px) rather than three separate values.
• Colors use your chosen format. Colors appear in the format you picked in the Colors section (HEX, RGB, HSL or HSB), and modern color spaces such as oklch() are converted so every color is readable.
• Pseudo-elements show only what differs. A ::before block lists only the properties that are not simply inherited from the element, so you see what the pseudo-element really changes.

What you copy is exactly what you see, color format included.

What it does not show

Computed values are the result, not the source. You see 16px, not the 1rem or var(--space-4) the author wrote, and you do not see which rule set the value. For that, switch the dropdown to Source to browse the CSS rules behind the element.

The list is also a deliberate selection. Properties outside it, such as transform, z-index, overflow or opacity, are not in the Computed block. Use the Source view or the DevTools Computed pane when you need one of those.

When it is useful

• Answering "what is that?" Find the exact font size, padding or radius of a button on any site in two clicks.
• Copying a starting point. Grab a clean block of CSS for a card or heading you like and adapt it in your own project. The guide on how to copy CSS from a website walks through it.
• Design QA. Check a build against the design file without asking a developer to open DevTools.
• Third-party widgets. Read the rendered styles of embeds and components you cannot open the source of.

Paired with element inspection and the box model, it covers most quick "how was this built" questions. If you want the same styles as utility classes, the Tailwind view converts them in the same section.

Computed CSS is free in Screen Ruler, with no account and no time limit.

Common questions

How is this different from the Computed tab in DevTools?

DevTools lists every property the browser tracks, several hundred of them, mostly defaults. Screen Ruler shows a curated set covering size, spacing, layout, background, effects and type, drops default values and formats the result as a CSS block you can copy in one click. It also sits in a side panel next to the page, so you do not need to open DevTools at all.

Is the computed CSS inspector free?

Yes. Computed CSS is part of Screen Ruler's free features, along with element inspection, distance measurement, page rulers and the color picker. The Source and Tailwind views in the same section are part of the paid plans.

Why does the value differ from the CSS in the stylesheet?

Computed values are resolved by the browser. Relative units like rem, em and percentages become pixels, custom properties are replaced by their values, and colors are converted to a single format. To see the CSS as written, use the Source view.

Can I see the styles of ::before and ::after?

Yes. When the selected element has a ::before or ::after with content, its styles appear as separate blocks under the element's own CSS, limited to the properties that differ from the element.