Safari screenshots: beyond Cmd+Shift+3

The standard macOS screenshot shortcuts work in Safari, but they only capture what’s visible on your screen. If you need a full-page screenshot, want to capture a specific HTML element, or need to test how a page looks on different devices, Safari has built-in developer tools that do all of this — no extensions required.

This guide covers every method, from quick keyboard shortcuts to Safari’s Web Inspector capture features that most people don’t know exist.

Method 1: Quick screenshots with keyboard shortcuts

These macOS shortcuts work in any app, including Safari:

Shortcut What it captures
Cmd+Shift+3 Entire screen (including Safari toolbar, Dock, menu bar)
Cmd+Shift+4 Selected area (drag crosshair over the part of Safari you want)
Cmd+Shift+4, then Space The Safari window (with or without shadow)
Cmd+Shift+5 Open the Screenshot toolbar for any capture mode

Add Ctrl to any shortcut to copy to clipboard instead of saving a file. This is the fastest way to paste a Safari screenshot directly into Slack, email, or a document.

The limitation: these shortcuts only capture what’s visible in the Safari window. For anything below the fold, you need one of the methods below.

Method 2: Full-page screenshot with Web Inspector

Safari’s Web Inspector can capture an entire web page — including everything below the scroll — as a single image. No extensions needed.

Step 1: Enable the Develop menu

If you haven’t already, enable Safari’s developer tools:

  1. Open Safari > Settings (or press Cmd+,)
  2. Click the Advanced tab
  3. Check “Show features for web developers”

This adds a Develop menu to Safari’s menu bar. You only need to do this once.

Step 2: Open Web Inspector

Navigate to the page you want to capture, then open Web Inspector using any of these methods:

  • Press Cmd+Option+I
  • Go to Develop > Show Web Inspector
  • Right-click anywhere on the page and select Inspect Element

Step 3: Capture the full page

  1. In Web Inspector, make sure you’re on the Elements tab
  2. Find the <html> tag at the very top of the DOM tree
  3. Right-click the <html> tag
  4. Select Capture Screenshot
  5. Choose where to save the file

Safari renders the entire page — including content below the fold — into a single PNG. On long pages this can produce very tall images (10,000+ pixels), so the file size may be significant.

LazyScreenshots captures Safari content and adds annotations, backgrounds, and device frames in one step.

Try LazyScreenshots Free

Method 3: Screenshot a specific element

Need to capture just a hero banner, a navigation bar, or a single card component? Web Inspector lets you screenshot individual DOM elements.

  1. Open Web Inspector (Cmd+Option+I)
  2. Click the element picker icon (crosshair) in the top-left of the Web Inspector toolbar, or press Cmd+Shift+C
  3. Click the element you want on the page — Web Inspector highlights it and jumps to its HTML tag
  4. Right-click the highlighted tag in the Elements panel
  5. Select Capture Screenshot

Safari saves a PNG cropped to the exact dimensions of that element. If the element has a transparent background, the PNG preserves the transparency.

When element screenshots are useful

  • Capturing a single component for design documentation
  • Grabbing a specific chart or table from a dashboard
  • Isolating a UI bug to share with your team
  • Getting clean product screenshots without surrounding page chrome

Method 4: Export as PDF for print-quality captures

Safari can export any web page as a PDF, which captures the full page at vector quality (text stays sharp at any zoom level).

  1. Navigate to the page in Safari
  2. Go to File > Export as PDF
  3. Choose a save location and click Save

The exported PDF respects the page’s print styles (the @media print CSS rules), which means some elements may be hidden or reformatted. This is ideal for capturing articles, reports, or documentation. For a pixel-accurate capture of what you see on screen, use the Web Inspector method instead.

Print to PDF (alternative)

You can also use File > Print (Cmd+P), then click the PDF dropdown in the bottom-left of the print dialog and select Save as PDF. This gives you more control over page breaks and margins.

Method 5: Responsive Design Mode screenshots

Safari’s Responsive Design Mode lets you preview how a page looks on different devices — and you can screenshot each view.

  1. Go to Develop > Enter Responsive Design Mode (or press Cmd+Ctrl+R)
  2. Select a device from the toolbar (iPhone SE, iPhone 15 Pro, iPad, or custom dimensions)
  3. The page re-renders at that device’s viewport size
  4. Use Cmd+Shift+4 to screenshot the simulated view, or open Web Inspector for a full-page capture at that viewport width

This is the fastest way to capture mobile and tablet views without leaving your Mac. Combine it with the Web Inspector full-page method to get complete mobile screenshots for documentation or app store assets.

Method 6: Reader Mode for clean article screenshots

For blog posts and articles, Safari’s Reader Mode strips ads, navigation, and sidebars, leaving just the article text and images.

  1. Click the Reader icon in the address bar (or press Cmd+Shift+R) to enter Reader Mode
  2. Use any screenshot method to capture the clean layout

Reader Mode screenshots are ideal for sharing article content without visual clutter. The simplified layout also produces smaller, cleaner full-page captures via Web Inspector.

Dealing with lazy-loaded content

Many modern websites use lazy loading — images and content only load when you scroll to them. If your full-page screenshot has blank white areas where images should be, the content wasn’t loaded yet when Safari captured the page.

The fix: scroll through the entire page from top to bottom before capturing. This forces all lazy-loaded content into the DOM. Then open Web Inspector and capture as usual.

For very long pages, you can also use the Console tab in Web Inspector to scroll programmatically:

// Scroll to the bottom to trigger lazy loading
window.scrollTo(0, document.body.scrollHeight);

Wait a few seconds for images to load, then run the capture.

Safari screenshot tips for developers

  • Disable animations before capturing: In Web Inspector’s Elements tab, add * { animation: none !important; transition: none !important; } as a new CSS rule to freeze all animations
  • Force dark mode: In Responsive Design Mode, toggle the dark/light appearance to capture both variants
  • Hide the toolbar: Press Cmd+Shift+F to enter full-screen Safari, then Cmd+Shift+4+Space to capture the window without the URL bar showing
  • Capture at specific widths: Use Responsive Design Mode to set an exact viewport width (e.g., 1200px for a blog content area), then capture
  • Check for print styles: If you’re exporting as PDF, preview with File > Print first to see what the print stylesheet hides

Quick reference: Safari screenshot methods

Method What it captures Requires
Cmd+Shift+3/4/5 Visible screen area only Nothing (built-in macOS)
Web Inspector > Capture Screenshot (<html>) Entire page including below the fold Develop menu enabled
Web Inspector > Capture Screenshot (element) Single HTML element Develop menu enabled
File > Export as PDF Full page as vector PDF Nothing (built-in Safari)
Responsive Design Mode + any method Page at mobile/tablet viewport Develop menu enabled
Reader Mode + any method Clean article content only Page supports Reader Mode