Element Screenshot
POST
/v1/screenshot/element
curl -X POST "https://screenshot.toolkitapi.io/v1/screenshot/element" \
-H "X-API-Key: YOUR_KEY" \
-H "Content-Type: application/json" \
-d '{"url": "https://example.com", "selector": "h1", "padding": 10}'# See curl example// See curl example# See curl example
Response
200 OK
{
"image": "iVBORw0KGgoAAAANSUhEUgAA...",
"format": "png",
"selector": "h1",
"width": 640,
"height": 48,
"url": "https://example.com"
}How to Use
1
Send a POST request to /v1/screenshot/element with a JSON body containing the target url and a selector (CSS selector).
2
Optionally set padding (0-100px) to add space around the element, delay for JS rendering, and dark_mode for colour scheme emulation.
3
The response returns a base64-encoded PNG cropped to the element's bounding box.
About This Tool
Capture a specific DOM element on a webpage by CSS selector. The browser renders the full page, locates the element, and returns a tightly-cropped PNG screenshot of just that element.
Perfect for capturing hero sections, charts, widgets, navigation bars, or any other isolated component without the surrounding page content.
Why Use This Tool
- Component Testing — Capture individual UI components for visual regression testing in your CI pipeline.
- Social Cards — Screenshot a specific section of your page to generate Open Graph or Twitter Card images.
- Documentation — Capture specific UI elements for product documentation, tutorials, or design reviews.
Frequently Asked Questions
What CSS selectors are supported?
Any valid CSS selector — IDs (#main), classes (.hero), tag names (article), attribute selectors, and complex combinators.
What if the element is not found?
The API returns a 400 error with a descriptive message indicating the selector didn't match any element.
Can I add padding around the element?
Yes — set the padding parameter (0-100 pixels) to add whitespace around the captured element.
Start using Element Screenshot now
Get your free API key and make your first request in under a minute.