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);
background-repeat: no-repeat;
background-size: cover;
filter: blur(1px) brightness(70%) saturate(100%);
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
}
Bigger Preview Popover
This CSS snippet will increase the popover on the links inside Obsidian. This is helpful when you have large information on notes and you want to see more of them that note rather than just a small part.
.popover.hover-popover > .markdown-embed {
height: 100%;
max-height: 60vh;
max-width: 60vh;
overflow: scroll;
}Canvas Cards with Images
This CSS snippet adds an image top on the canvas cards.
.canvas img[alt~="canvas-top"] {
position: relative;
left: -24px;
top: -24px;
object-fit: cover;
width: calc(100% + 48px);
max-width: none;
display: block;
margin-bottom: -12px;
}
Kanban Redesign CSS Snippet
Fan of kanban or use kanban on daily basis? This snippet will improve your experience with Kanban.
Learn how to use it on your vault from here. Kudos to TheKoTech for creating this as well as the previous snippet.
Blockquote Hover Effect
This snippet adds a hover effect on quotes in the preview mode inside Obsidian.
/* quote container */
.markdown-preview-view .quoteback {
border: 1px solid #c2dfe3;
border-radius: 8px;
color: rgb(70, 74, 77);
padding: 1rem 1rem 0rem 1rem;
position: relative;
}
/* make border darker on hover */
.markdown-preview-view .quoteback:hover {
border: 1px solid #9db8bf;
}
/* quote footer */
.markdown-preview-view .quoteback>footer {
border-top: 1px solid lightblue;
font-size: .875rem;
font-weight: 600;
margin: 0.5rem -1rem auto -1rem;
padding: 0.5rem 1rem 0 1rem;
}
/* quote link */
.markdown-preview-view .quoteback>footer>cite>a {
height: 100%;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
/* quote title */
.markdown-preview-view .quoteback::after {
display: block;
color: rgb(92, 109, 115);
content: attr(data-title);
font-size: .875rem;
font-weight: 600;
margin: 0 -1rem;
padding: 0 1rem 0.5rem 1rem;
}
blockquote {
transition-duration: 0.2s;
}
blockquote:hover {
box-shadow: 0 10px 16px lightgrey;
transform: translateY(-10px);
}
Quotes Callout
This snippet adds a beautiful quote-styled callout.
.callout[data-callout="quote"] {
display: flex;
flex-direction: column-reverse;
/* --callout-padding: 8px 1rem; */
}.callout[data-callout="quote"] > .callout-title {
/* margin-block: .5em; */
text-indent: 1.25em;
}
.callout[data-callout="quote"] > .callout-title > .callout-icon,
.callout[data-callout="cite"] > .callout-title > .callout-icon {
transform: scale(-1, 1);
}
.callout[data-callout='quote'] .callout-content p/* ,
.callout[data-callout='cite'] .callout-content p */{
margin-top: 0;
}Minimal Cards CSS
One of the major features of minimal theme is Cards view of dataview tables. But it doesn’t work with other themes. To do so, you have to strip out the CSS snippet and make some changes. This CSS snippet will work with any obsidian theme to create cards view in dataview table query.
Clean Embeds CSS
This CSS snippet will change the embedding style inside the note and make it look like a note itself.
Centered Heading 1
This aligns the H1 in your markdown notes to the center.
Centered H1
/* EDIT MODE */
.HyperMD-header.HyperMD-header-1 {
text-align: center;
}
/* PREVIEW MODE */
.markdown-preview-view h1 {
text-align: center;
}Add a custom background
This CSS snippet allows you to set a custom background image to your vault.
Dashboard CSS
Created by TFThacker, this CSS snippet helps you to create a beautiful-looking dashboard inside Obsidian.
Daily Notes CSS
This CSS snippet creates links to the previous day’s daily note, tomorrow’s daily note, and a year ago’s daily note.
Media Grid CSS
Meta grid CSS creates a more visually interesting markdown note by grouping sets of images, videos, and even audio tracks in a grid layout.
Rainbow outline Indents
It creates rainbow-colored indented lists inside obsidian.
PDF page break Export
This CSS snippet makes it easy to export your note to PDF. There will always be a page break before an H1 heading.
/* Page breaks */
@media print {
h1 {
page-break-before: always;
}
h2, h3, h4, h5, h6 {
page-break-after: avoid;
}
/* optional */
.internal-embed{
page-break-after: avoid;
page-break-before: avoid;}
}If you want to get a page break even after h2 and h3, edit the code according to your preferences.
Pretty Highlights
This CSS snippet helps you to separate text blocks in your note using realistic highlighting colors.
Pretty Tables
This is a CSS snippet for Tables. It helps you customize tables in obsidian to look pretty and appealing.
Scrollable Slides
The slides plugin creates slideshows from your notes where — — — acts as a slide unit. And the slides are not much responsive with the core plugin. When you add more content to the slide, it overflows and the content is hidden below the container.
This CSS snippet adds a scrollbar so that all the content can be viewed during the slideshow.
Tasks Redesign
This CSS snippet redesigns the dialog popup of tasks to make it cleaner and easier to navigate.
Vertical Kanban
By default, Kanban works in horizontal mode. With this CSS Snippet works in vertical mode. This is really helpful if you want to put Kanban board in the sidebar and operate from there.
WWW icon next to the Link
This is another CSS snippet that adds a www icon next to all external links inside your vault.
.theme-dark .external-link {
color:blanchedalmond !important;
font-size: 1.01em!important;
font-weight:500;
background-position: left!important;
background-repeat: no-repeat!important;
background-image: linear-gradient(transparent, transparent), url(https://i.imgur.com/As68C4R.png)!important;
background-size: 30px!important;
padding:10px 2px 10px 35px!important;
background-position-y: 0px!important;
cursor: pointer!important;
}
.theme-light .external-link {
color:chocolate !important;
font-size: 1.01em!important;
font-weight:500;
background-position: left!important;
background-repeat: no-repeat!important;
background-image: linear-gradient(transparent, transparent), url(https://i.imgur.com/As68C4R.png)!important;
background-size: 30px!important;
padding:10px 2px 10px 35px!important;
background-position-y: 0px!important;
cursor: pointer!important;
}Zoom Image on Hover
This CSS snippet creates a zoom effect on the images you have on your vault when you hover over them.
Folder & File Icon
This CSS snippet adds a small icon on the left side of folders and files in the file explorer.
Folder & File Icons
.nav-folder-children .nav-file-title-content:first-child::before {
content: "\e924 ";
font-family: 'IcoMoon-Free';
}
.nav-folder-children .nav-folder-title-content::before {
content: '\e930 ';
font-family: 'IcoMoon-Free';
}
.nav-folder-children .nav-file-title-content:first-child::before { content: '🗒 '; }
.nav-folder-children .nav-folder-title-content::before { content: '📂 '; }Hide Ribbon
This CSS snippet hides the ribbon when the sidebar is collapsed. And it will show up when you hover over it.
SourceRainbow Colored Tags
Want to add different colors to your tags instead of the default one? This CSS snippet will help you achieve that.
Rainbow Colored Folders
This CSS snippet adds eye-pleasing colors to folders in obsidian’s file explorer.
Beautiful Blockquote
This CSS snippet is stripped from the Wiselight theme. It works better in light theme. But if you want to use it with dark theme, you can change the colors to make it suit your personal needs.
Gradient Workspace
This is my personal favorite one. I prefer to use it whenever possible. It adds gradient colors to all of the vault. I actually stripped this from Royal Velvet Theme. And I’m not a pro at CSS, so it might conflict with the theme you are using.
But it works for me pretty well.
I really like the visual appearance of obsidian with these bright and eye-pleasing gradient colors.
If you want to get all of these CSS snippets in one place, I’ve collected them and created a vault that you can download from Buy Me a Coffee or Gumroad.
