In this step-by-step guide, we’ll be exploring a couple of ways to make VS Code Transparent on Windows.

You may want to opt for a transparent VS Code primarily for the aesthetics.

Sometimes transparent windows can be visually pleasing but can also facilitate multitasking to a certain degree by allowing you to keep an eye on other apps or resources while coding.

Ultimately, it all boils down to personal preference.

Let’s get to it!

As we’re talking about visual stuff, I strongly suggest you check out this video for a showcase of this functionality:

GlassIt

First up, we have the GlassIt Extension.

It’s worth noting that this extension isn’t limited to Windows; it also plays nice with Linux, provide you’re running the Xorg display server and have the xprop package installed.

To tweak the Transparency you can press CTRL + ALT + Z to increase the transparency and CTRL + ALT + C to decrease it.

You can also adjust the transparency increment level in the settings.json file, meaning how much you increase or decrease the transparency per keystroke.

• glassit.alpha (integer): Transparency level [1-255]
• glassit.step (integer): Increment of alpha

Windows opacity

The other extension is called Windows opacity.

This extension, however doesn’t have shortcuts to tweak the transparency level.

You can however manually tweak the winopacity.opacity setting in the settings.json file.

winopacity.opacity (integer): [0-255]

Caveat

Unfortunately, both extensions have a caveat.

A higher level of transparency causes even the text and the important elements of the editor to become transparent as well.

There are a few open issues on GitHub regarding this topic, and I would be happy if the authors could fix the problem.

It would be astonishing to be able to code as if you were writing on a piece of glass.