Skip to main content
CSS snippets let you override specific parts of the Obsidian interface — heading colors, font choices, ribbon visibility, line width — without building a full theme. Snippets are plain .css files stored in your vault’s configuration folder.
Snippets load after themes, so snippet rules take precedence over theme styles. This makes them ideal for small per-vault or per-device tweaks.

​
Where snippets live

Obsidian looks for CSS snippets in: 
<your-vault>/.obsidian/snippets/
Create this folder if it doesn’t exist. Each .css file in the folder becomes a separate snippet you can toggle on or off independently.

​
Add a snippet on desktop

1

Open the snippets folder

Go to Settings → Appearance → CSS snippets and select the Open snippets folder icon.
2

Create a CSS file

In the folder that opens, create a new file with a .css extension, for example my-tweaks.css.
3

Write your CSS

Add your CSS rules to the file and save it.
4

Reload snippets

Back in Obsidian, under Settings → Appearance → CSS snippets, select the Reload snippets icon to refresh the list.
5

Enable the snippet

Toggle the snippet on using the toggle next to its name.

​
Add a snippet on mobile

1

Locate your vault folder

Open your device’s file manager. Find the vault’s location — you can check the path in Manage vaults by tapping your vault.
2

Create the snippets folder

Open the .obsidian configuration folder inside your vault. Create a folder called snippets if it doesn’t exist.
3

Add your CSS file

Copy or create your .css snippet file inside the snippets folder.
4

Enable the snippet in Obsidian

Open Settings → Appearance, scroll to CSS snippets, tap Reload snippets, then tap the toggle to enable your snippet.
You can also sync snippets to mobile using Obsidian Sync or any other sync service, or use a community plugin to create snippets from within Obsidian.

​
Hot-reloading snippets

Once a snippet is enabled, Obsidian automatically detects changes when you save the file and applies them immediately — no restart required. If you don’t see the change, use the Command palette command Reload Obsidian without saving to force a full refresh.

​
CSS variables

Obsidian exposes a large set of CSS variables that make it easy to adjust the interface consistently. Setting a variable on body applies it globally. 
/* Change all six heading levels to a rainbow */
body {
  --h1-color: red;
  --h2-color: orange;
  --h3-color: yellow;
  --h4-color: green;
  --h5-color: blue;
  --h6-color: pink;
}
For the full variable reference, see the CSS variables documentation.

​
Example snippets

/* custom-font.css */
body {
  --font-text-override: 'Georgia', serif;
}

/* hide-ribbon.css */
.workspace-ribbon {
  display: none;
}

/* readable-width.css */
.markdown-preview-view,
.cm-contentContainer {
  max-width: 720px;
  margin: 0 auto;
}
Add a custom CSS class to individual notes using the cssclasses property, then target that class in a snippet.In the note’s frontmatter:
cssclasses:
  - red-border
In your CSS snippet:
.red-border img {
  border-color: #ff0000;
  border-style: solid;
}
Every note with red-border in its cssclasses property will display images with a red border.

​
Validate your CSS

Invalid CSS is silently ignored. If a snippet doesn’t work, run the file through the W3C CSS Validation Service to check for errors.

​
Learn more

Build docs developers (and LLMs) love

Get started for freeTalk to us