How to screenshot a single element on a web page

Updated October 17, 2026
On this page

    Your operating system's screenshot tool makes you drag a box and hope you got the edges right. DivPic lets you click the element itself, so the crop is exact every time, down to the pixel.

    What you need
    • DivPic installed in Chrome, Firefox or Safari
    • No account. Screenshots work without signing in.

    Take your first element screenshot

    1. Click the DivPic icon in your browser toolbar, or press ⌘ ⇧ E (Ctrl ⇧ E on Windows and Linux).
    2. Check the format in the toolbar: PNG or SVG.
    3. Click Element, then hover over the page. DivPic outlines the element under your pointer.
    4. Use ↑ and ↓ to step out to the parent or into a child until the outline fits what you want.
    5. Click. Depending on your setting, the image is saved to your Downloads folder or copied to your clipboard.
    Tip: wrapper elements are often completely covered by their children, so you can't hover them directly. Hover a child and press ↑ to reach the wrapper.
    Copy an element once, paste it into whatever you're working in.

    PNG or SVG: which one?

    FormatWhat it isUse it for
    PNGA pixel image, cropped to the elementBug reports, docs, chat, slides, anywhere a regular picture works
    SVGA vector file built from the page's elementsAnything that gets scaled up, like decks, print, or editing in a vector tool

    If you're not sure, pick PNG. It looks exactly like what's on screen.

    Save it or copy it

    The toolbar has two destinations:

    • Save to Downloads writes a file you can attach or keep.
    • Copy to Clipboard lets you paste straight into Slack, Docs, Notion, an email, or anywhere else that accepts images.

    Make it look finished

    Open DivPic's settings (the gear in the toolbar) to style PNG screenshots before they're saved:

    • Background: transparent, a solid colour, or one of the built-in gradients
    • Padding around the element
    • Corner radius for rounded edges
    • Shadow, with blur, spread and opacity

    Save a combination you like as a preset so every screenshot in a doc or deck matches.

    Capture several elements at once

    1. In the toolbar, switch from Single element to Multiple elements.
    2. Click each element you want. A badge shows how many you've picked.
    3. Press Enter to capture them all.

    Keyboard shortcuts

    ActionKey
    Start selecting⌘ ⇧ E on Mac, Ctrl ⇧ E elsewhere
    Select the parent element↑
    Select a child element↓
    Capture a multiple selectionEnter
    CancelEsc

    To change the start shortcut in Chrome, open chrome://extensions/shortcuts. In Firefox, go to Add-ons and themes, click the gear, then Manage Extension Shortcuts.

    Frequently asked questions

    Do I need an account to take screenshots?

    No. PNG and SVG screenshots work without signing in. Only Figma mode needs an account.

    Can I screenshot an element that's taller than my screen?

    Yes. DivPic scrolls the element through view and stitches the pieces into one image. See full-page screenshots for how that works.

    Are my screenshots uploaded anywhere?

    No. Screenshots are made in your browser and saved or copied on your device. The privacy policy has the details.

    Was this article helpful?

    Keep reading