Skip to content

Instantly share code, notes, and snippets.

@rexydye
Created January 2, 2024 09:54
Show Gist options
  • Save rexydye/473138f307550f6b243b13f586ba68b8 to your computer and use it in GitHub Desktop.
Save rexydye/473138f307550f6b243b13f586ba68b8 to your computer and use it in GitHub Desktop.
Add titlebar gradient to VS Code like in intelij idea / other jetbrains IDE
  1. Install this extension: Custom CSS and JS Loader
  2. Create vscodestyle.css file somewhere on your system with this content:
.monaco-workbench .part.titlebar {
  position: relative;
}
.monaco-workbench .part.titlebar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
  width: 200px;
  height: 100px;
  background: radial-gradient(
    circle,
    rgba(85, 255, 85, 0.15),
    rgba(0, 0, 0, 0.05)
  );
  border-radius: 50%;
  filter: blur(10px);
}
  1. Add this to your settings.json, type a path to your vscodestyle.css file like below:
{
  "vscode_custom_css.imports": [
    "file://C:/Users/Admin/Documents/vscodestyle.css"
  ]
}
  1. Press ctrl+shift+p on windows or shift+cmd+p on mac and select Reload Custom CSS and JS.
  2. Reload vs code window, if it complains about that it is corrupted, simply click “Don't show again”.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment