Skip to content
Cloudflare Docs

Capture screenshot

The /screenshot endpoint renders the webpage by processing its HTML and JavaScript, then captures a screenshot of the fully rendered page.

Basic usage

Sets the HTML content of the page to Hello World! and then takes a screenshot. The option omitBackground hides the default white background and allows capturing screenshots with transparency.

Terminal window
curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "html": "Hello World!",
    "screenshotOptions": {
      "omitBackground": true
    }
  }' \
  --output "screenshot.webp"

Advanced usage

Navigate to https://cloudflare.com/, changing the page size and waiting until there are no active network connections or up to a maximum of 4500ms. Then take a fullPage screenshot.

Terminal window
curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://cloudflare.com/",
    "screenshotOptions": {
       "fullPage": true,
      "omitBackground": true,
    },
    "viewport": {
      "width": 1280,
      "height": 720
    },
    "gotoOptions": {
      "waitUntil": "networkidle0",
      "timeout": 45000
    }
  }' \
  --output "advanced-screenshot.webp"

Customize CSS and embed custom JavaScript

Terminal window
curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/",
    "addScriptTag": [


      { "content": "document.querySelector(`h1`).innerText = `Hello World!!!`" }
    ],
    "addStyleTag": [
      {
        "content": "div { background: linear-gradient(45deg, #2980b9  , #82e0aa  ); }"
      },
      {
        "url": "https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      }
    ]
  }' \
  --output "screenshot.webp"

Parameters

  • url (string) - The webpage URL to take a screenshot of.
  • html (string) - Instead of a URL, allows rendering custom HTML for the screenshot.
  • screenshotOptions (object) - Configures the screenshot format and quality.
    • omitBackground (boolean) - Removes the default white background when taking a screenshot.
  • viewport (object) - Sets the browser viewport dimensions for rendering.
    • width (number) - Viewport width in pixels.
    • height (number) - Viewport height in pixels.
  • gotoOptions (object) - Configures how and when the page is considered fully loaded.
    • waitUntil (string) - Defines when the browser considers navigation complete (networkidle0, domcontentloaded).
      • networkidle0 - Waits until there are no more than 0 network connections for at least 500 ms before taking a screenshot.
    • timeout (number) - Maximum wait time (in milliseconds) before navigation times out.
  • addScriptTag (array of objects) - Injects JavaScript code before taking a screenshot.
    • url (string) - Loads an external script file before rendering.
    • content (string) - Runs inline JavaScript before rendering.
  • addStyleTag (array of objects) - Injects CSS styles before rendering.
    • content (string) - Defines inline CSS rules.
    • url (string) - Loads external stylesheets before rendering.