Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Custom Background Wallpaper (Glass)New to Visual Studio Code? Get it now.
Custom Background Wallpaper (Glass)

Custom Background Wallpaper (Glass)

victorhugocarniel

|
7 installs
| (0) | Free
Set any custom background image in VS Code with a stunning glass and blur effect. Adicione qualquer imagem de fundo com efeito de vidro.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Custom Background Wallpaper (Glass)

Add a stunning custom background image to your VS Code with an elegant glass and blur effect directly on your code editor.

🚀 Features

  • Custom Image: Set any PNG, JPG, or JPEG as your editor background.
  • Adjustable Blur: Fine-tune the blur level to maintain your code focus.
  • Opacity Control: Darken or lighten the background overlay to ensure optimal code readability.
  • One-Click Reload: Instantly applies changes using the built-in action button.

💡 PRO TIP: For the best visual experience, it is highly recommended to use an image with a resolution equal to or higher than your monitor's resolution.

⚙️ How to Setup and Use

⚠️ IMPORTANT: You must run VS Code as ADMINISTRATOR to apply or remove the wallpaper, as this extension writes directly to the core installation CSS files.

  1. Close VS Code and reopen it by right-clicking the icon and selecting "Run as Administrator".
  2. Press Ctrl + Shift + P (or Cmd + Shift + P on Mac) to open the Command Palette.
  3. Search for and execute the command: Wallpaper: Set Background Image (or the exact title configured in your package.json for extensionBackground.setWallpaper).
  4. A file selection window will open. Select your desired image.
  5. The extension will prompt you with two configuration input boxes:
    • Blur Level: Enter a value (e.g., 0 for perfectly sharp, 5 for medium blur, 15 for heavy blur).
    • Background Opacity: Enter a decimal value from 0.0 (fully clear image) to 1.0 (fully solid dark overlay). Recommended value: 0.6.
  6. A success notification will appear at the bottom right. Click "Reload Now" to see your new background immediately!

🛑 Important Notes & Troubleshooting

  • "Installation Appears Corrupted" Warning: After applying the wallpaper, VS Code will display a warning saying "Your Code installation appears to be corrupt. Please reinstall". This is perfectly safe and expected. It occurs because the extension modifies the core CSS layout to unlock true transparency. You can safely hide this message permanently by clicking the gear icon on the notification and choosing to ignore/dismiss it.
  • To Remove the Wallpaper: Simply open the Command Palette (Ctrl + Shift + P), run the remove command (extensionBackground.removeWallpaper), and reload the window.

Custom Background Wallpaper (Glass) - Português

Adicione uma imagem de fundo customizada ao seu VS Code com um efeito elegante de vidro e desfoque (Glass/Blur) diretamente na sua área de código.

🚀 Funcionalidades

  • Imagem Customizada: Defina qualquer arquivo PNG, JPG ou JPEG como fundo do seu editor.
  • Desfoque Ajustável: Controle o nível de blur para manter o foco total no código.
  • Controle de Opacidade: Escureça ou clareie a película sobre a imagem para garantir uma excelente legibilidade.
  • Recarregamento Instantâneo: Aplique as mudanças na hora usando o botão de reload embutido na notificação.

💡 DICA DE OURO: Para um melhor resultado visual, é altamente recomendável o uso de imagens com resolução igual ou superior à do seu monitor.

⚙️ Como Configurar e Usar

⚠️ IMPORTANTE: É obrigatório executar o VS Code como ADMINISTRADOR para aplicar ou remover o wallpaper, pois esta extensão precisa de permissões para alterar os arquivos de estilo (CSS) internos da aplicação.

  1. Feche o VS Code e abra-o novamente clicando com o botão direito no ícone e escolhendo "Executar como Administrador".
  2. Pressione Ctrl + Shift + P para abrir a Paleta de Comandos.
  3. Busque e execute o comando: Wallpaper: Set Background Image (ou o nome que configurou no seu package.json para extensionBackground.setWallpaper).
  4. Uma janela para seleção de arquivos será aberta. Escolha a imagem que deseja usar.
  5. A extensão exibirá duas caixas de configuração consecutivas no topo do editor:
    • Nível de Desfoque (Blur): Digite um valor (ex: 0 para imagem nítida, 5 para desfoque médio, 15 para desfoque intenso).
    • Opacidade do Fundo: Digite um valor decimal entre 0.0 (imagem totalmente clara) e 1.0 (fundo totalmente opaco/escuro). O valor ideal recomendado é 0.6.
  6. Um balão de sucesso aparecerá no canto inferior direito. Clique em "Reload Now" para ver o seu novo wallpaper instantaneamente!

🛑 Avisos Importantes e Resolução de Problemas

  • Aviso de "Instalação Corrompida": Após aplicar a foto, o VS Code exibirá um aviso no canto inferior direito dizendo "Your Code installation appears to be corrupt. Please reinstall". Isto é perfeitamente normal e seguro. O aviso ocorre porque a nossa extensão edita o arquivo CSS nativo do editor para permitir a transparência absoluta. Pode ocultar esta mensagem para sempre clicando na engrenagem da notificação e escolhendo ocultar/ignorar.
  • Para Remover o Wallpaper: Pressione Ctrl + Shift + P, execute o comando de remoção (extensionBackground.removeWallpaper) e recarregue a janela.
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft