iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Set omitBackground: true in Puppeteer’s page.screenshot() options and save the result as a PNG. This hides the browser’s default white background; it does not remove backgrounds that the webpage itself paints with CSS.
Capture a transparent PNG in Puppeteer
Here is a complete minimal example using Puppeteer’s documented screenshot option. Replace the URL with the page you want to capture.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
await page.screenshot({
path: 'page.png',
omitBackground: true,
});
} finally {
await browser.close();
}
})();omitBackground is a boolean option that defaults to false. Puppeteer documents it as hiding the default white background to allow screenshots with transparency. PNG is the documented default format, and when you provide a path, Puppeteer infers the image type from its extension. The current ScreenshotOptions reference is for Puppeteer 25.12.0: ScreenshotOptions interface.
For PNG output, you can omit type: 'png'. JPEG does not support transparency, and the JPEG quality option does not apply to PNG.
#1 Best Overall
Capture the full page or one element
Full document
Add fullPage: true to capture the full document rather than only the current viewport:
await page.screenshot({
path: 'page.png',
fullPage: true,
omitBackground: true,
});Puppeteer’s screenshot guide covers page screenshots and full-page capture: Screenshots guide.
Rank #2
One element
Wait for a selector and call screenshot() on the resulting element handle:
Recommended Free Tools
const element = await page.waitForSelector('.target');
if (!element) {
throw new Error('Could not find .target');
}
await element.screenshot({
path: 'element.png',
omitBackground: true,
});The element screenshot method attempts to scroll an off-screen element into view. It throws if the element has been detached from the DOM before capture. See ElementHandle.screenshot().
Why the PNG may still look opaque
omitBackground removes the browser’s default white backdrop; it is not a command to erase all backgrounds defined by the page. If a screenshot still appears opaque, inspect the page and the specific target element for CSS such as background or background-color. If appropriate for your capture, override those styles before taking the screenshot. Avoid changing them when the page’s authored background is part of the content you need to preserve.
Use the screenshot data in memory
With a path, Puppeteer saves the image to a file. Without one, page.screenshot() returns screenshot data as a Uint8Array by default; its API also supports returning a base64 string when you request the corresponding encoding. Consult the Page.screenshot() API reference for the return and encoding options.
Troubleshooting
- The image has a white background: Confirm
omitBackground: trueis on the screenshot call, and check whether the page or target element paints its own background with CSS. - The file is not PNG: Use a
.pngpath (or explicitly settype: 'png'). Puppeteer infers the type from a supplied path; PNG is also the default documented type. - The selected element cannot be captured: Make sure the selector matches an element and that it remains attached until the screenshot completes. An element handle becomes unusable if its DOM node is detached.
- The output is only the visible area: Set
fullPage: trueonpage.screenshot()when you need the full document, rather than a single element or viewport capture.
Or skip the browser setup
If you need a screenshot through an API rather than a Puppeteer script, ScreenshotNeo returns a screenshot or PDF from one GET request. Its PNG endpoint supports transparent backgrounds; the API options and request details are in the ScreenshotNeo documentation.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Quick Recap
Best Value
- Used Book in Good Condition
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers say which page verdict and billing outcome applied. Its MCP server gives AI agents tools for screenshots, page information and PDF capture. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000.
Sign up for ScreenshotNeo’s free plan.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
