Element Screenshot (CSS Selector & Clip)

ScreenshotAPI allows you to capture a specific section of a webpage instead of rendering the entire page. By using a CSS selector, you can target a particular element such as a header, product card, table, or any custom component and generate a precise screenshot of only that area.

For more control, the clip option lets you define an exact region (x, y, width, height) to capture a custom portion of the page. You can alsoscroll to a specific selector before taking the screenshot, ensuring that elements outside the initial viewport are correctly rendered.

Advanced customization options include adjusting the top offset (in pixels) to fine-tune the capture area, as well as the ability to blur or remove specific sections of the page. This is particularly useful for hiding sensitive data, excluding unwanted UI elements, or focusing only on relevant content.

These features make element-level screenshots ideal for UI testing, visual validation, content extraction, and automated reporting, where precision and control over the captured area are essential.


const axios = require("axios");

let config = {
	method: "get",
	maxBodyLength: Infinity,
	url: "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&adjust_top=100&clip%5Bx%5D)=290&clip%5By%5D)=80&clip%5Bheight%5D)=1100&clip%5Bwidth%5D)=800&blur_selector=.sensitive-data&remove_selector=.unwanted-element&[OPTIONS]",
	headers: { }
};

axios.request(config).then((response) => {
	console.log(JSON.stringify(response.data));
}.catch((error) => {
	console.log(error);
});


<?php
	$client = new http.Client;
	$request = new http.Client.Request;
	$request->setRequestUrl("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&adjust_top=100&clip%5Bx%5D)=290&clip%5By%5D)=80&clip%5Bheight%5D)=1100&clip%5Bwidth%5D)=800&blur_selector=.sensitive-data&remove_selector=.unwanted-element&[OPTIONS]");
	$request->setRequestMethod("GET");
	$request->setOptions(array());

	$client->enqueue($request)->send();
	$response = $client->getResponse();
	echo $response->getBody();
?>


package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {
	url := "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&adjust_top=100&clip%5Bx%5D)=290&clip%5By%5D)=80&clip%5Bheight%5D)=1100&clip%5Bwidth%5D)=800&blur_selector=.sensitive-data&remove_selector=.unwanted-element&[OPTIONS]"
	method := "GET"

	client := &http.Client { }
	req, err := http.NewRequest(method, url, nil)

	if err != nil {
		fmt.Println(err)
		return
	}

	res, err := client.Do(req)
	if err != nil {
		fmt.Println(err)
		return
	}

	defer res.Body.Close()
	body, err := io.ReadAll(res.Body)
	if err != nil {
		fmt.Println(err)
		return
	}

	fmt.Println(string(body))
}


OkHttpClient client = new OkHttpClient().newBuilder().build();
MediaType mediaType = MediaType.parse("text/plain");
RequestBody body = RequestBody.create(mediaType, "");
Request request = new Request.Builder().url("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&adjust_top=100&clip%5Bx%5D)=290&clip%5By%5D)=80&clip%5Bheight%5D)=1100&clip%5Bwidth%5D)=800&blur_selector=.sensitive-data&remove_selector=.unwanted-element&[OPTIONS]"
	.method("GET", body)
	.build();
Response response = client.newCall(request)
	.execute();


import requests

url = "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&adjust_top=100&clip%5Bx%5D)=290&clip%5By%5D)=80&clip%5Bheight%5D)=1100&clip%5Bwidth%5D)=800&blur_selector=.sensitive-data&remove_selector=.unwanted-element&[OPTIONS]"
payload = {}
headers = {}

response = requests.request("GET", url, headers, data=payload)
print(response.text)


require "uri"
require "net/http"

url = URI("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&adjust_top=100&clip%5Bx%5D)=290&clip%5By%5D)=80&clip%5Bheight%5D)=1100&clip%5Bwidth%5D)=800&blur_selector=.sensitive-data&remove_selector=.unwanted-element&[OPTIONS]")

https = Net::HTTP.new(url.host, url.port)
https.use_ssl = true

request = Net::HTTP::Get.new(url)

response = https.request(request)
puts response.read_body

Selector

Parameter Name : selector

It allows you to capture a specific element of a webpage instead of rendering the entire page. It works by targeting an element using a valid CSS selector and generating a screenshot of only that matched section.

When this parameter is used, the system locates the element in the DOM and captures only that portion, effectively cropping the screenshot to the selected component. This is useful for isolating key UI elements without including unnecessary surrounding content.

Options

Provide any valid CSS selector, for example:

div > .main-navigation > .logo
#header
.product-card

When to use

Use this parameter when you need to capture specific components such as headers, logos, product sections, charts, or UI elements for focused analysis or presentation.
It is especially useful for automation workflows, visual testing, and extracting consistent sections across multiple pages.

Default value:' '(empty string).

Scroll To Element

Parameter Name : scroll_to_element

It instructs the browser to automatically scroll to a specific element on the page before capturing viewport screenshot. It ensures that the target element is brought into the viewport so it can be properly loaded and included in the final output.

This is particularly useful for pages where important content appears below the fold or is only triggered when it enters the viewport. By scrolling directly to the desired element, you can guarantee accurate capture without relying on full-page scrolling.

Options

Provide any valid CSS selector, for example:

#element-id
.class-name
div > .section

When to use

Use this parameter when you need to focus on a specific section of the page that is not immediately visible on load.
This is ideal for capturing content that appears below the fold, such as product details, user comments, or interactive elements that require scrolling to be seen.

Default value:' '(empty string).

Clip (Crop Screenshot)

Parameter Name : clip

It allows you to capture a specific rectangular area of the webpage instead of rendering the full viewport or entire page. It provides precise control over which portion of the screen should be included in the final screenshot by defining exact coordinates and dimensions.

This is useful when you need pixel-perfect control over the output, such as capturing a fixed region, cropping sensitive areas, or focusing on a specific layout section without relying on CSS selectors.

Parameter

x: The horizontal starting point (in pixels) from the left edge of the page
y: The vertical starting point (in pixels) from the top of the page
width: The width of the capture area in pixels
height: The height of the capture area in pixels

When to use

Use this parameter when you need exact positional control over the screenshot area, such as capturing a specific region of a dashboard, UI section, or any custom layout where selectors are not reliable.
It is also useful for automation workflows where consistent cropping dimensions are required across multiple pages.

Default value:' '(captures the entire viewport).

Blur Selectors

Parameter Name : blur_selector

It allows you to apply a blur effect to specific elements on a webpage before the screenshot or render is captured. It works by targeting one or more CSS selectors and visually blurring the matched elements in the final output.

This is useful for masking sensitive information such as personal data, email addresses, payment details, or any UI sections that should not be visible in screenshots while still keeping the rest of the page intact.

Multiple selectors can be provided to blur different parts of the page simultaneously.

Options

You can provide one or more valid CSS selectors, for example:

#main-wrapper > div > section:nth-child(1)
.user-email
.payment-details, .credit-card-info

When to use

Use this parameter when you need to hide sensitive or private content in screenshots while preserving the overall structure and layout of the page.
It is commonly used in reporting, debugging, client previews, or any scenario where partial redaction of information is required without removing elements entirely.

Default value:' '(empty string).

Learn more about blur selectors.

Remove Selectors

Parameter Name : remove_selector

It allows you to completely remove specific elements from a webpage before screenshot capture. It works by targeting one or more CSS selectors and physically excluding the matched elements from the DOM during rendering.

This is useful when you want to clean up a page before capture by removing unwanted components such as ads, popups, sidebars, cookie banners, or any irrelevant UI elements that may affect the final output.

Multiple selectors can be provided to remove different elements in a single request.

Options

You can provide one or more valid CSS selectors, for example:

.ad-banner
#sidebar
.popup, .cookie-banner

When to use

Use this parameter when you need a clean and distraction-free screenshot of a webpage. It is especially useful for documentation, competitor analysis, UI snapshots, and reporting where only core content should be visible.
It helps improve clarity by removing unnecessary or disruptive elements from the final render.

Default value:' '(empty string).

Note: If a selector does not match any element on the page, the render process will continue normally without throwing an error.

Learn more about remove selectors.

Adjust Top

Parameter Name : adjust_top

It controls the initial vertical scroll position of the webpage before the screenshot is captured. It allows you to shift the viewport downward by a specific number of pixels from the top of the page, ensuring that a particular section is positioned correctly within the visible area.

This is especially useful when the content you want to capture is not at the top of the page, or when you need to simulate user scrolling behavior to focus on a specific section during rendering.

Options

Set a numeric value in pixels, for example:

0 = start from the top of the page
500 = scroll 500px down before rendering
1200 = scroll further down for deeper content

When to use

Use this parameter when you need precise control over what part of the page appears in the viewport, such as capturing mid-page sections, testing layout behavior, or focusing on specific content areas without using selectors.
It is particularly useful for long pages where important content is not located at the top.

Default value:0 pixels(no adjustment)

Note: This feature is not supported for PDF rendering, as PDFs are generated from full-page layouts rather than viewport-based positioning.

Selector to Click

Parameter Name : selector_to_click

It allows you to simulate a user click on a specific element before the screenshot or render is captured. It works by targeting an element using a valid CSS selector and triggering a click event in the browser context prior to the final rendering process.

This is particularly useful for interacting with dynamic UI components such as dropdowns, tabs, modals, cookie banners, or settings panels that need to be activated before the desired content becomes visible.

After the click action is executed, the page continues rendering and the final screenshot is captured in its updated state.

Options

Provide a valid CSS selector, for example:

.settings-panel > .unit-toggle
#login-button
.dropdown-menu .active-item

When to use

Use this parameter when the content you need to capture is hidden behind interactive elements that require a click event to reveal. It is commonly used for UI testing, automation workflows, and capturing post-interaction states of a webpage.

Default value:' '(empty string).

Click Recursion

Parameter Name : click_recursion

It defines how many times the system should repeatedly click the element specified in selector_to_click before taking the final screenshot or render. It is designed to handle interactive UI components that require multiple sequential clicks to fully reveal the desired state.

This is particularly useful for elements like nested dropdowns, toggle switches, accordion menus, or settings panels where a single click is not enough to reach the final visible content state.

It must be used together with selector_to_click, as it depends on that target element to perform the recursive click actions.

Options

Set a numeric value representing the number of clicks, for example:

2 = click twice sequentially

When to use

Use this parameter when dealing with complex interactive elements that require multiple clicks to fully expand or toggle content. It is commonly used in UI testing, automation workflows, and capturing final UI states after layered interactions.

Default value:0(no recursive clicking).