29

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

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

I guess if there is a way to make VS Code transparent so I can write code and research in the browser at the same time, instead of Alt-Tabing any time I have to switch, so I dont have to interrupt my workflow often.

1

5 Answers 5

26

Use VS Code extension

GlassIt-VSC

enter image description here search in extension search bar

just install and enjoy it works great !

3
  • 2
    Windows only says even the description of this extension.
    – Jos
    Nov 21, 2019 at 13:07
  • 5
    @Jos It supports linux now. Aug 25, 2020 at 11:43
  • 1
    Note: It makes whole window transparent, both background and font. Aug 5 at 16:36
11

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

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

    enter image description here

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

1
  • 1
    Note: It makes whole window transparent, both background and font. Aug 5 at 16:38
4

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:

Notepad++ - Code Editor sample and transparency:

0
3

All the possible solutions are in:

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") )
)
)

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)

5
  • 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). Dec 17, 2021 at 20:11
  • 1
    @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.
    – VonC
    Dec 17, 2021 at 20:43
  • Awesome sauce!! Dec 17, 2021 at 21:20
  • 1
    Note: It makes whole window transparent, both background and font. Aug 5 at 16:38
  • @AgainPsychoX Thank you for the feedback. I don't suppose there is any way to be more specific when using that feature?
    – VonC
    Aug 5 at 19:44
0

If your in Linux(Debian), Install this: Glassit Linux

Don't remember Install requirements:

sudo apt install -y wmctrl x11-utils bash

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.