I prototyped my web page directly in HTML/CSS, using custom fonts for header text.

The font rendering however is very different on Windows, so I would like to export some parts of the Web page to bitmap, but with a transparent background.

Is there any way to do that?

  • @Lollero Well, I knew it would be different, but not that broken. – julien_c Jun 8 '12 at 11:41
  • If it's text, why not just copy&paste to photoshop and get the right font? When designing a website, I sometimes use this plugin that brings google web fonts to photoshop webink.com/webfontplugin works quite well, though it is tad slow fetching the fonts at times.. – Joonas Jun 8 '12 at 11:45
  • @Lollero The font rendering from Chrome is different from the one from Photoshop as well (albeit only slightly) so I was hoping to get to use the one from Chrome. Actually, even Safari looks different from Chrome! (isn't is supposed to be the exact same font rendering?) – julien_c Jun 8 '12 at 11:58
  • No. Each browser renders type it's own way. Some better than others. As for the screen shot.... there's no such thing as a transparent web page, So, no, you can't. – Scott Jun 8 '12 at 12:05
  • 2
    Webkit does have a render engine.. but Chrome has it's own render engine (check Activity monitor with Chrome running). Firefox doesn't render type worth a **** and IE is horrid. Each browser employs it's own method regardless of what is included in some of the common libraries, like WebKit. – Scott Jun 8 '12 at 13:05

Yes, you can actually do this if you can use macOS. A handy dandy program called Page Layers allows you to export PSDs of web pages and you can then delete the existing background images or elements and do as you like!


Just found an easy way via Safari.

Right click on element, Inspect Element, then in the Inspector right click on the element node you want to export and pick Capture Screenshot. This to me keeps transparency. Safari Version 13.1 (14609.

enter image description here


There is an online tool that allows to export all layers from web page to PSD file or just to a set of PNG files packed with zip. It supports shadows and opacity. All exported layers have transparent background (alpha channel). Here you go https://www.page2psd.com


You can indeed do this using Chromium! One of the ways is to use it with a wrapper like puppeteer with nodejs:

const puppeteer = require('puppeteer');
const chromiumBinPath = '/usr/bin/chromium-browser';

(async () => {

  const browser = await puppeteer.launch({
    args: [
    //pipe: true,
    ignoreHTTPSErrors: true,
    headless: true,
    executablePath: chromiumBinPath,
  const page = await browser.newPage();
  await page.goto('https://some-site.localhost/render-this-page/');
  await page.screenshot({
      path: './screenshot.png',
      omitBackground: true,

  await browser.close();


The option omitBackground: true saves a screenshot to image file without solid fill background, so it is indeed transparent, even alpha transparency of elements in the foreground is correctly preserved!

Please notice that I use an external Chromium binary (Ubuntu package chromium-browser) instead of installing it with the npm package. This approach and the options used above allowed me to run this in WSL 1 (Bash on Windows), Ubuntu distribution.



  1. take a screenshot of the page as is

  2. set the text to black and the background to white, take another screenshot

  3. use the screenshot from (2) as an alpha transparency mask over the original screenshot from (1).

You should then have a colour screenshot with a transparent background. Sure you'll probably need to do a bit of extra manual masking as well to get perfect results, but it sounds like it should cover your need to extract images of the header text.

For more general use, you might be able to put together a more sophisticated stylesheet to give better results (ie replace images with solid fill).


No there isn't any way to save screen shot with a transparent background. you have to do all manual...


Simple. Take a screen shot of your webpage, then use the background eraser tool in Photoshop to get rid of the background.
Easier still, would be re-creating your marquee text completely in Photoshop, minus the background and any other distractions, then using an <img> tag to place the PNG-24+transparency background (or PNG-32, as it's known in Fireworks), inside the <div> where your title would otherwise be.
You can also make a non-transparent version for older browsers (like IE6), which don't support transparent images.
If you know a little PHP, you can even set up a script to detect the user agent (browser), then use the appropriate image, transparent image, or, for modern browsers, lack of image, and instead, use of an actual font.


Give this place a try. Also, make sure your background-color is set to transparent.



Piece of cake.

  1. Take screenshot with white background like normal.
  2. Convert white background to transparent with ImageMagick.

To convert white background to transparent with ImageMagick, do this in the terminal:

convert screenshot.png -transparent white screenshot-transparent.png

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.