Screenshot a single element

Point at any element on a page and press one key. Screen Ruler crops the screenshot to that element, includes its measurements if you want them, and saves a PNG.

What it does

Element Screenshots capture just the part of the page you care about. Instead of grabbing the whole screen and cropping it yourself, you point at a button, a card or a navigation bar and Screen Ruler saves a PNG cropped around it, with a little of the surrounding page for context.

The image can include what Screen Ruler shows on top of the element while you inspect it:

• Margin and padding overlays, shaded with their pixel values.
• The element tag label, such as button.primary.
• Distance measurements between a selected element and the one you are hovering, when both are on screen.

Screen Ruler's own interface, the control bar and the floating inspector, is hidden for the moment of the capture and never ends up in the image.

How to screenshot an element

1. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
2. Hover the element you want. Its margin and padding overlays appear. To fix the target in place, click to select it.
3. Press 8, or click Capture Screenshot in the control bar.

The page flashes briefly and the PNG is saved through your browser's normal download. If nothing is hovered or selected, the same key saves the whole visible window instead.

If the element is partly off screen, Screen Ruler scrolls it into view, takes the shot and scrolls back to where you were.

Output and settings

Screenshots are saved as PNG at your screen's full pixel density, so on a Retina or other high density display the image has two or three times as many pixels as the CSS size of the element and stays sharp when you zoom in. The crop adds 50 pixels of the surrounding page on each side, trimmed at the edges of the window.

Two settings on Screen Ruler's options page, under Screenshots, control the result:

• Screenshot Padding: places the capture on a light grey backdrop with rounded corners and a thin border, ready to drop into a document or slide. Turn it off for a plain, flush crop.
• Capture Highlights: includes the measurement overlays, tag label and margin and padding shading. Turn it off for a clean shot of the element as visitors see it.

Both are on by default. In Edit Mode, screenshots are always clean, so you can capture your changes without any overlays.

Limits

• Visible area only. Screen Ruler captures what the browser shows in the window. An element taller or wider than the window cannot be cropped whole, so Screen Ruler saves the visible window instead. Zoom the page out to fit a large element first.
• No full page capture. It does not stitch together a scrolling screenshot of a whole page.
• Restricted pages. Chrome does not let extensions capture its own pages, the Chrome Web Store or other extensions, so screenshots are not available there.
• Responsive Mode. Inside Responsive Mode the shortcut saves the whole viewport frame rather than a single element. That capture is rebuilt from the page, and some cross-origin images, fonts that have not loaded and video frames can be missing from it.

When it is useful

• Bug reports. Show exactly which component is wrong, with its spacing visible, instead of a full screen capture with an arrow drawn on it.
• Design reviews and handoff. Capture a component with its margin and padding values to show where a build differs from the design. Pair it with distance measurement to show the gap between two elements.
• Documentation and style guides. Collect clean crops of buttons, cards and form fields from a live site.
• Inspiration. Save components you like from other sites without having to crop them afterwards.

Element Screenshots are part of Screen Ruler's free plan, free forever. For more on capturing, see the Sampling and capturing docs.

Common questions

Can Chrome screenshot a single element without an extension?

Yes, through DevTools: select the node in the Elements panel, right-click it and choose Capture node screenshot. It works, but it takes several steps and you cannot include margin or padding overlays. Screen Ruler does it with one key press while you hover the element.

What format are the screenshots saved in?

PNG, at your display's full pixel density. On a high density screen the image is two or three times the element's CSS size, so text and edges stay sharp.

How do I get a screenshot without the overlays?

Turn off Capture Highlights under Screenshots on Screen Ruler's options page. To also drop the grey backdrop, turn off Screenshot Padding. Screenshots taken in Edit Mode are always clean.

Can it capture an element taller than the screen?

No. Screenshots come from the visible part of the tab, so an element that does not fit in the window is saved as a capture of the whole window instead. Zooming the page out first usually lets a large element fit.

Is it free?

Yes. Element Screenshots are one of Screen Ruler's free features and stay free after the trial ends.