Screenshot one element of a page

To screenshot one element of a web page, add a CSS selector to a CurlShot request, for example selector=h1 or selector=.pricing-table. CurlShot opens the page, finds the first element that matches and returns an image of that element alone, cropped to its edges. To cut out a fixed area instead, give its position and size in pixels.

Request

curl "https://curlshot.com/api/v1/screenshot?access_key=YOUR_ACCESS_KEY&url=https://example.com&selector=h1" \
  --output element.png

Get a free access key Read the guide

How to do it, in three steps

1
Create a free account and copy your access key.
2
Find the CSS selector of the element: its id, its class or its tag.
3
Add selector to the request and save the image that comes back.

What people use it for

A chart or a dashboard tile as an image for a report or an email
A pricing table, a testimonial or a product card on its own
One component of your app for the docs
Watching one part of a page for changes

For developers: one request

The same thing from your own code. It is a plain HTTP request, so it works from any language. Create a free account to get an access key.

Questions people ask

How do I take a screenshot of a specific element?

Add selector to a CurlShot request with the CSS selector of the element. The image contains that element and nothing else.

What if the element appears late?

Add wait_for_selector with the same selector. The screenshot is taken only after the element is visible.

Can I capture an area by coordinates?

Yes. clip_x, clip_y, clip_width and clip_height cut out a rectangle of the page, measured in pixels from its top left corner.

Can I hide things inside or around the element?

Yes. hide_selectors hides any elements you name, and styles adds your own CSS to the page before the screenshot.

Take as many screenshots as you need

A free account gives you 100 screenshots every month and keeps them in one place. No card needed.

Start free See the plans