Visual Studio Code transparent window?

Question

A have a small resolution on my PC so it's not very convenient to work in several tabs at the same time like: open console window, browser, code editor and some other stuff.

Console has a very cool feature: a transparent background, so it's very very comfortabe to type something in console while looking to some learning material in browser through the trasparent background.

So I guessed if there any way to make VS Code transparent so i can write code and research in browser at the same time not Alt-Tabing any time I have to switch, so I dont have to interrupt my workflow such often.

Solution 1

Use VS Code extension

GlassIt-VSC

search in extension search bar

just install and enjoy it works great !

Solution 2

Don't know about other OS but Windows can make any window transparent.

I've tried several 3rd party apps and stopped on AutoHotkey (free, Open-source, easy to learn, can be used for much more).

1. Install AutoHotkey
2. Create file transparency.ahk
3. Place inside this file:

^!RButton::
WinGet, currentTransparency, Transparent, A
if (currentTransparency = OFF)
{
    WinSet, Transparent, 150, A
}
else
{
    WinSet, Transparent, OFF, A
}
return

4. Run the script

   This script will toggle active window transparency(0-255, 0 - transparent, 255 - opaque)

   on Ctrl+Alt+Right mouse button

   ^ - Ctrl

   ! - Alt

   RButton - Right mouse button

5. Add this script to startup folder (Win+R shell:common startup)

   

Based on: https://superuser.com/questions/272812/simple-transparency-toggle-with-autohotkey

Solution 3

As far as I know - this isn't possible in e.g. Visual Studio Express or VS Code.

It seems not to be on the feature request list at Microsoft.

One solution I see for you is Notepad++. Install the TopMost add-in. It works like you can see in following screenshot:

Solution 4

All the possible solutions are in:

• "How to be cool and make Visual Studio Code (VSCode) transparent " from Emmanuel N Kyeyune

Mainly:

Windows 10

Install the GlassIt-VSC extension

In the VSCode settings (File > Preferences > Settings OR Ctrl + ,):

• glassit.alpha (integer): Transparency level [1-255]
• glassit.step (integer): Increment of alpha OR:
  • ctrl+alt+z to increase transparency and
  • ctrl+alt+c to decrease it as set by the extension
    (take care it doesn't override some other shortcuts assigned these hotkeys)

Linux (tested on Ubuntu 18.04)

Based on devilspie sudo apt-get install devilspie with instruction like:

( if
( contains ( window_class ) "Code" )
( begin
( spawn_async (str "xprop -id " (window_xid) " -f _NET_WM_WINDOW_OPACITY 32c -set _NET_WM_WINDOW_OPACITY 0xdfffffff") )
)
)

• PR 52707 "Windows, macOS and Linux transparency" from Charles Milette (sylveon).

The PR has been closed in August 2019:

We currently do not accept more features that are Electron specific. We have seen to many issues lately when updating to newer Electron versions and playing the catch-up game is very painful.

But said PR still includes a ton of options, like the Vibrancy extension.

---

Update Dec. 2021:

Chaim Eliyah mentions in the comments:

Vibrancy "works" for Mac OS X; it modifies the base CSS files so Microsoft will forever complain about your VSCode installation
(they tell you how to ignore the warning in the README)

View more solutions

Comments

[Admin]

I filed this as feedback on the VSCode GitHub project github.com/Microsoft/vscode/issues/12578

[Jos]

Windows only says even the description of this extension.

[Arkistarvh Kltzuonstev]

@Jos It supports linux now.

[Chaim Eliyah]

Vibrancy "works" for Mac OS X; it modifies the base CSS files so Microsoft will forever complain about your VSCode installation (they tell you how to ignore the warning in the README).

[VonC]

@ChaimEliyah Thank you for this feedback. I have included your comment in the answer for more visibility. I have added the README link you mention: let me know if this is the correct one.

[Chaim Eliyah]

Awesome sauce!!