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, 2012 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, 2012 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, 2012 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, 2012 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, 2012 at 13:05

8 Answers 8


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


Yes! 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 note 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.



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!


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



  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).


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.



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

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.