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.

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

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/

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 and in 2012 uploaded a JavaScript implementation to GitHub. Now with the web platform widely supporting the screen capture API in 2019, this can be easily implemented as a web application.

With Skypack’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! :heart_eyes: