HTMLCSStoImage transparent background: how to capture PNG screenshots

To capture a transparent PNG with HTML/CSS to Image (HCTI), set transparent_background: true on the create-image request and use PNG output. The option works for both HTML/CSS renders and URL screenshots. JPG and WebP render with a white background for this feature. See the transparent background parameter reference.

1. Choose the input: HTML/CSS or a page URL

Use the HTML route when you control the markup being rendered. Use the URL route when you want to capture a public webpage. The request accepts either html or url; css is optional. Add the transparency option to either request.

HTML/CSS render

{
  "html": "<div class='logo'>Your logo</div>",
  "transparent_background": true
}

This is the minimal request shape documented for HTML content. Supply any required authentication and request transport according to your HCTI client or API setup.

URL screenshot

{
  "url": "https://example.com",
  "transparent_background": true
}

The transparency parameter also applies when the input is a URL. For either path, request PNG when you need alpha transparency in the output.

2. Use PNG and verify the result

PNG is the supported choice for preserving transparency here. HCTI documents that JPG and WebP render with a white background for this feature. After receiving the result, open it in an image viewer that displays transparency, or place it over a colored background in your design tool. A white-looking preview against a white canvas alone does not prove that the image is opaque.

3. Keep an existing CSS-based workflow

If you already use the older CSS method, it remains supported: pass body { background-color: transparent; } through the request’s css parameter. HCTI’s FAQ specifically recommends the API css parameter rather than relying on a <style> tag inside the HTML.

{
  "html": "<div class='logo'>Your logo</div>",
  "css": "body { background-color: transparent; }"
}

For new requests, prefer transparent_background: true. Keep the CSS approach when maintaining an existing integration or when that is how your current request is configured. HCTI documents both approaches in its transparent background guide.

4. Capture the full scrollable page when needed

Transparency and capture height are separate concerns. If you need the entire scrollable page rather than the current viewport, the HCTI FAQ documents full_screen: true. Combine it with the transparency setting and PNG output as appropriate for your request.

{
  "url": "https://example.com",
  "transparent_background": true,
  "full_screen": true
}

Use full-page capture only when the content below the initial viewport belongs in the image. It does not replace the transparency option.

5. Troubleshoot white or partly opaque output

Symptom	Likely cause	Fix
The whole image has a white background	The output format is JPG or WebP, or transparency was not enabled.	Request PNG and set `transparent_background: true`. If using the legacy method, send the CSS through the API `css` parameter.
The page background is clear, but a panel or section is still colored	A child element has its own background color.	Inspect the rendered elements and remove or override the background on the specific child that should be clear.
Only some parts appear transparent	Overlapping elements, painted backgrounds, or CSS inheritance may affect the visible result.	Check backgrounds on child elements and review which element is painted above another. Transparency of the page background does not make every foreground element transparent.
A style tag in the supplied HTML does not clear the background	The legacy HCTI workflow expects the CSS in the request’s `css` parameter.	Move `body { background-color: transparent; }` into that parameter, or use `transparent_background: true`.
The full page is missing	Transparency does not expand the capture area.	Set `full_screen: true` when the entire scrollable page is required.

6. Or skip the browser setup

If you need a screenshot of a URL without setting up a browser capture workflow, ScreenshotNeo takes a URL in one GET request and returns an image or PDF. Its API also supports PNG, JPEG, and WebP output, but the transparent-background option described above is specific to HCTI; do not assume a ScreenshotNeo screenshot will have a transparent page background.

For example, save a standard screenshot of a page as WebP:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation for request options.

Cookie and consent banners, newsletter popups, and chat widgets are removed before capture; each cleanup step can be turned off.
Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are never billed. Response headers identify the page verdict and billing status.
An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf.
The free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots.

7. FAQ

Can I use transparency when rendering a URL?

Yes. HCTI documents transparent_background for both URL screenshots and HTML/CSS renders.

Can I keep using the CSS method?

Yes. Pass body { background-color: transparent; } in the request’s css parameter. The dedicated transparency option is the recommended approach for new requests.

Does transparent background make every element invisible?

No. It omits the page background, while child elements can still paint their own backgrounds. Inspect those elements when only part of the image is clear.

Does full-page capture enable transparency?

No. full_screen: true controls capture extent; use the transparency setting separately.

Sources

For URL screenshots with a different workflow, visit ScreenshotNeo.