How to make VS Code Transparent
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:
First up, we have the GlassIt extension.
To tweak the transparency you can press
Z to increase the transparency and
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.
integer): Transparency level [1-255]
integer): Increment of alpha
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
winopacity.opacity (integer): [0-255]
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.
Let me know what you think about this article in the comments section below.
If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.