27 Awesome CSS Snippets For Customizing Obsidian

Transform your workspace with these simple CSS tweaks

CSS snippets are powerful tools to add a custom style to your Obsidian vault. They can be used to redefine various parts of the user interface such as size, position and color of different UI elements.

With CSS, you can create a personalized look and feel in Obsidian that is more aligned with your personality and work style. CSS can also help you to enhance productivity and improve the overall user experience.

By adding different styles and customizations, you can create a workspace that is not only functional but also visually appealing.

This can make the note-taking process more enjoyable and fulfilling.

This article is a compilation of useful CSS snippets collected from Reddit, Obsidian Forum, & Obsidian Discord. The credit for the CSS goes to the respective creators. I’ve added a link to the original source wherever possible.

How to Add CSS Snippets to Your Vault

Before we dive deep into the CSS snippets, here’s how you can add these inside your vault.

Here’s how you can add all of the CSS snippets in this article to your vault:

• Open settings
• Go to Appearance> CSS snippets> Open Snippets Folder
• Download the CSS Snippets or create them inside this folder.
• Get back to Obsidian
• Reload snippets
• Toggle on the Snippets

I’ve created Obsidian Vault with all the CSS snippets mentioned in this article. If you don’t want to go to every single link, you can get all of them directly on Gumroad or Buy Me a Coffee.

Background for Kanban Board

This custom CSS adds a custom background. You can change the wallpaper by changing the URL in the CSS.

view-content .kanban-plugin::after {
  content: "";
  position: fixed;
  background-image: url(https://images.unsplash.com/photo-1513735718075-2e2d37cb7cc1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bGlnaHRob3VzZXxlbnwwfHwwfHw%3D&w=1000&q=80)…