Despite many new great features in recent Windows editions, one thing you still can’t do natively in Windows is taking a window screenshot with transparency. To this day, Windows clipboard still doesn’t support alpha channels(opens new window).

Many tutorials on the internet about taking screenshots with shadows in Windows 10 tells you to use a photo editor to add in fake shadows[1].

But with today’s web technology and some maths, it’s possible to capture translucent windows with real shadows in Windows. Try it out → https://alphashot.glitch.me/(opens new window)

The idea is to capture 2 screenshots: One picture on black, one picture on white, and then use some maths to generate a combined screenshot with an alpha channel.

For example, a transparent pixel is #555555 (rgb(85, 85, 85)) on white and #1a1a1a (rgb(26, 26, 26)) on black. What color satisfies this criteria? This results in a system of equation.

This resulted in a color rgba(33,33,33,76.86%).

I originally blogged about this algorithm back in 2010(opens new window) and in 2012 uploaded a JavaScript implementation to GitHub(opens new window). Now with the web platform widely supporting the screen capture API(opens new window) in 2019, this can be easily implemented as a web application.

With Skypack(opens new window)’s help, I can in 2020 import the code I wrote back in 2012 directly in the browser.

import { ablend } from 'https://cdn.skypack.dev/ablend@0.1.0'

I so love the web platform of today! 😍


  1. Here are some:

    ↩︎