How to screenshot one HTML element
If you only need one card, table, form, chart, hero section, image or UI component, you do not need to capture the whole page and crop it afterward. Capture the element itself.
In Capture, choose Select Element, move your pointer over the webpage until the exact component is highlighted, then click it. Capture takes only that element and opens it in the editor. Chrome DevTools can also do this with Capture node screenshot if you prefer the built-in technical route.
Two reliable methods
Both approaches can isolate one HTML element. The difference is what happens before and after the screenshot.
Chrome officially supports capturing an individual node from the DOM Tree.
This is precise and requires no extension, but it is a developer-oriented workflow and does not include Capture's annotation, privacy and reporting tools.
Capture removes the need to inspect the DOM manually.
Press Esc or use Cancel if you decide not to capture anything.
Select Element vs Select Area
Use Select Element when the thing you want is one actual webpage component such as a card, table, modal, form, navigation block or hero. Use Select Area when you want an arbitrary rectangle that may cross several elements or include only part of one component.
What people capture
Capture one KPI, analytics tile or status panel without the surrounding dashboard.
Capture the exact data table relevant to a bug report, review or documentation step.
Capture one complete form or form section with its labels, fields and validation state.
Review one landing-page section without sending the entire webpage.
Capture cards, modals, menus and components for design review or developer handoff.
Use one exact component as a clean screenshot in guides, SOPs and training material.
When the wrong element is highlighted
Webpages are built from nested elements. Sometimes the first highlighted node is only a button or text label; other times it includes too much of the page. Move the pointer until the highlight matches the full component you actually want. In DevTools, select a parent or child node in the DOM Tree until the highlighted bounds are correct.
Privacy
Element capture can reduce accidental exposure because unrelated page areas never enter the screenshot. After capture, Blur, Pixelate and Crop can further reduce visible private information. For passwords, API keys or other highly sensitive secrets, fully remove, cover or crop the information rather than relying on blur alone.
Common questions
Use Chrome DevTools Capture node screenshot, or choose Select Element in Capture and click the highlighted webpage component.
If the div is the exact component you need, inspect it in Chrome DevTools and use Capture node screenshot. With Capture, hover until that component boundary is highlighted and click it.
Yes. Select Element captures the component itself, so you do not need to take a full-page screenshot and manually crop it afterward.
Yes. Capture lets you take screenshots free. Copy Image is unlimited for Free users, with no watermark and no ads.
Move your pointer to a surrounding parent or inner child component until the highlight matches what you need. Webpage elements are often nested inside one another.
No browser extension can inject its element-selection interface into Chrome-protected pages such as chrome:// pages or the Chrome Web Store. Use Chrome's own tools or an operating-system screenshot method on protected browser pages.
Related guides
FREE SCREENSHOT CAPTURE
Take screenshots free in Chrome. Copy Image is unlimited for Free users, with no watermark and no ads.
Each Capture page has one clear purpose, so you can jump directly to the capture method or guide you need.
