Transparent background

Create images with transparent backgrounds for logos, overlays, and more

We’ve simplified transparent backgrounds. You can now set transparent_background to true directly on the create image request:

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

The parameter works with both HTML/CSS and URL-based images. For a URL screenshot, replace html with url.

To render an image with a transparent background, pass the CSS via the css parameter:

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

This image demonstrates a transparent background:

<div class="logo-container">
  <img src="logo.png" alt="Company Logo">
</div>

body {
  background-color: transparent;
}
.logo-container {
  padding: 20px;
  /* Any background styling here will be included in the image */
}

1. Logos: Create logo variations with transparent backgrounds
2. Overlays: Generate images that layer well with other content
3. Icons: Design icons that work on any background
4. Watermarks: Create watermarks that blend seamlessly

• Always use PNG format for transparent backgrounds
• Test your image on different colored backgrounds
• Consider adding a subtle shadow for better visibility
• Use the device_scale parameter for higher quality

• Don’t use JPG format when transparency is needed
• Don’t assume white is transparent
• Don’t forget to set background-color: transparent

When capturing screenshots from URLs, add the CSS via the API parameters:

{
  "url": "https://example.com",
  "css": "body { background-color: transparent; }"
}

1. White Background Appears

   • Ensure you’re using PNG format
   • Verify CSS is being applied
   • Check you are passing CSS using the css parameter

2. Partial Transparency

   • Look for background colors in child elements
   • Check for overlapping elements
   • Verify CSS inheritance

/* Send this CSS in the request's css parameter. */
body { background-color: transparent; }

Transparent PNGs are supported in all modern browsers:

• Chrome
• Firefox
• Safari
• Edge
• Opera
• Mobile browsers