How to screenshot part of a web page

Sometimes you only need one piece of a page. A pricing card, a broken form, a chart, one testimonial. Capturing the whole screen and cropping it later works, but there are quicker and more precise ways, and a couple of tricks for the awkward cases like menus that vanish the moment you move your mouse.

Which method to use

Method	Precision	Speed	Good for
Keyboard shortcut	Whatever you drag	Fastest	Quick grabs to paste somewhere
Chrome element screenshot	Exactly one element	A few clicks	Clean images of a card, form or section
Chrome full size screenshot	The whole page, top to bottom	A few clicks	Long pages, before and after records
Screenshot extension	Varies, plus editing	Fast	Lots of annotated screenshots
Pinned comment in Lasso	The element you click	One click	Screenshots for feedback

On a Mac

Cmd+Shift+4 is the classic. Your cursor becomes a little crosshair, you drag a box, let go, and a file appears on your desktop. Add Control to that combo and it goes to the clipboard instead, which is handier when you're pasting straight into Slack and don't want a desktop full of files.

Cmd+Shift+4, then Space is the window version. The cursor turns into a camera, you click a window, and you get exactly that window with a nice soft shadow.

Cmd+Shift+5 brings up the full toolbar, and it's the one people forget about. Hidden under Options there's a 5 or 10 second timer, which is a lifesaver for menus, plus a setting for where files get saved.

On Windows

Win+Shift+S dims your screen and pops a small bar up at the top. Pick rectangle, freeform, window or full screen and drag. It lands on your clipboard, and a little notification lets you open it if you want to save or scribble on it.

The Snipping Tool is the same thing with a few more knobs, the useful one being a delay timer for menus and hover states.

PrtScn grabs the entire screen. Handy in a pinch, though you'll be cropping afterwards.

Chrome's element screenshot

This one is Chrome's best-kept secret. It'll screenshot a single element, cropped exactly to its edges.

1. Right-click the thing on the page and pick Inspect. Developer tools slide open with that element highlighted.
2. Over in the Elements panel, right-click the highlighted line and pick Capture node screenshot.
3. A PNG drops into your downloads.

Got the wrong size? You probably grabbed a child of the element you meant. Move your mouse over the lines just above it in the Elements panel and watch the page. Whatever lights up is what you'll capture, and the line one or two up is usually the box you were after.

Chrome's area and full page screenshots

With developer tools open, press Cmd+Shift+P on a Mac or Ctrl+Shift+P on Windows and type screenshot. You get four options.

• Capture area screenshot. Drag a box, like the keyboard shortcut, but at the page's full resolution.
• Capture full size screenshot. The entire page, including everything below the fold, in one tall image.
• Capture node screenshot. The selected element, same as above.
• Capture screenshot. The visible part of the page.

The awkward cases

Dropdown menus and hover states. These close the moment you press a shortcut. Use a timer. Cmd+Shift+5 on a Mac or the Snipping Tool's delay on Windows gives you a few seconds to open the menu first. For hover styles, Chrome's developer tools can hold the state for you. In the Styles panel, click :hov and tick :hover.

Missing images in a full page screenshot. Many pages only load images as you scroll down. Scroll to the very bottom first, then capture.

A sticky header repeated or covering content. Full page captures sometimes show a fixed header in the wrong place. Capture the section you need with an element screenshot instead.

Huge files. On high resolution screens, screenshots come out at two or three times the size you see. That's great for detail, but compress them before emailing a dozen.

Something private on screen. Crop it out, or cover it with a box in our free screenshot annotator before you share.

Making screenshots look good

For slides, docs or social posts, a raw screenshot can look a little bare. Our free screenshot beautifier puts it on a gradient background with a browser frame, rounded corners and a soft shadow, without uploading anything.

If the screenshot is for feedback, skip it

Be honest, why are you taking this screenshot? A lot of the time it's so you can tell someone "this bit needs fixing". If that's you, the screenshot itself is the slow part. Grab, crop, scribble, paste, add the link, explain which page, and then repeat the whole dance for issue number two.

So keep the shortcuts for pictures you actually want to keep. When what you really want is a conversation about the page, pin a note on it instead. We also compared the popular screenshot extensions for Chrome if you take a lot of them.