How to be cool and make Visual Studio Code (VSCode) transparent
Tags: tips, tricks, vscode, transparent
Published: 2018-12-28 08:52:28

---
title: How to be cool and make Visual Studio Code (VSCode) transparent
published: true
description: Instructions on how to make Visual Studio Code (VSCode) window transparent on Windows, Linux and MacOS
tags: tips, tricks, vscode, transparent
---
![transparent vscode window](https://thepracticaldev.s3.amazonaws.com/i/ja3r63kqoxsu7izm0aqp.png)
I'm a huge fan of applications that can enable transparency. No particular reason. I just love the aesthetic. Others may find this useful by having terminals in the background that they can mildly observe through the transparency etc

This is also quite a requested feature on the Visual Studio Code Github issues for a while now but there are no official solutions as of this writing. Hopefully that will soon change (see MacOS section below for more info on this).  

However, unofficially, these are the ways you can make VSCode transparent on your OS. Inspired by this [github issue](https://github.com/Microsoft/vscode/issues/12578)

## How to make VSCode transparent on Windows (tested on Windows 10)

Windows users have the simplest solution. Just install the [GlassIt-VSC extension](https://marketplace.visualstudio.com/items?itemName=s-nlf-fh.glassit)

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)

## How to make VSCode transparent on Linux (tested on Ubuntu 18.04)

For Linux this is particularly easy. First of all you will need *devilspie* (pron. Devil's Pie). 
*For the curious ones, devilspie is a non-gui utility that lets you make applications start in specified workplaces, in specified sizes and placements, minimized or maximized and much more based on simple config files.*

```
sudo apt-get install devilspie
mkdir -p ~/.devilspie
nano ~/.devilspie/vscode_transparent.ds
```

Then you copy and paste the following code into the file you just created `vscode_transparent.ds`

```
( 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") )
)
)
```
You can set your intended opacity using the hex string at the end `0xdfffffff`(this is about 87% opaque which is adequate for me). It has a range of 1 to 99. 

If you want to avoid all the hex math you can use percentages in your script like this (replace `87` with your desired opacity):

```
( if
( contains ( window_class ) "Code" )
( begin
( spawn_async (str "xprop -id " (window_xid) " -f _NET_WM_WINDOW_OPACITY 32c -set _NET_WM_WINDOW_OPACITY $(printf 0x%x $((0xffffffff * 87 / 100)))") )
)
)
```

You will notice that with `devilspie`, you can write a script to start any program with opacity. You just need to get the launch name of the application (in our case 'Code') and write a similar script. So you can also launch Sublime (subl) with opacity too.

On KDE Plasma apparently (I haven't tested this), you can even take it further. KDE has a blur effect you can enable as well as transparency:(see original github [comment](https://github.com/Microsoft/vscode/issues/12578#issuecomment-403619551) and a follow-up [comment](https://github.com/Microsoft/vscode/issues/12578#issuecomment-444781951))
```
(if (contains (window_class) "Code")
	(begin
		(spawn_async (str "xprop -id " (window_xid) " -f _KDE_NET_WM_BLUR_BEHIND_REGION 32c -set _KDE_NET_WM_BLUR_BEHIND_REGION 0 "))
		(spawn_async (str "xprop -id " (window_xid) " -f _NET_WM_WINDOW_OPACITY 32c -set _NET_WM_WINDOW_OPACITY 0xdfffffff"))
	)
)
```

I'd love to know if anyone knows anyway to achieve this blur on Ubuntu 18!

## How to make VSCode transparent on MacOS (untested)

MacOS users don't have many options with the current VSCode release (save for some inefficient hacks). However an amazing pull request is currently open that will add gorgeous transparency on all three platforms (Windows, Linux and MacOS). Currently there is no information about when this PR will be merged into a major release but hopefully it will be soon. For now, MacOS users (and others too) can use a source build of VSCode based on this pull request's branch.

Instructions for building and running VSCode from source on all three platforms found [here](https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run) and the referenced pull [request](https://github.com/Microsoft/vscode/pull/52707)

If any MacOS or other OS users have already tried this PR, please let me know. I will also test this and update this post soon with my findings.

Please upvote or contribute to the pull request so that we can get this awesome feature merged into our favorite code editor!