CSS Snippets for Obsidian Callouts: Customization Guide

Quick Answer: To use CSS snippets for Obsidian callouts, open Obsidian’s Settings, navigate to Appearance, and click the folder icon next to “CSS snippets.” Create a new .css file in that folder, define your custom callout using the .callout[data-callout="your-name"] selector, and assign RGB values to --callout-color and an icon name to --callout-icon. Refresh the snippets list in Settings and toggle your new snippet on.

Obsidian’s default callouts offer an excellent way to visually separate warnings, quotes, and information blocks from the rest of your text. Out of the box, the platform provides a solid variety of standard callout types like [!info], [!warning], and [!danger]. However, as your personal knowledge management system grows, you will likely encounter specific use cases where the default options fall short. You might need a specific color to match your personalized theme, a unique icon for a niche workflow, or an entirely new category of callout for project management.

Relying solely on default callouts forces you into a rigid visual structure that may not align with how your brain categorizes information. By leveraging CSS snippets, you gain complete control over the aesthetic and functional design of your callouts. This allows you to build custom visual hierarchies, integrate specialized iconography, and tailor the reading experience of your vault to your exact preferences.

This comprehensive guide breaks down the exact mechanics of how to use CSS snippets for Obsidian callouts. We will cover the underlying CSS structure Obsidian uses, how to create and enable custom snippets, and provide ready-to-use code blocks to help you customize colors, icons, and structural formatting.

Understanding Obsidian’s Callout Architecture

Before writing any code, it is vital to understand how Obsidian renders callouts under the hood. Obsidian treats callouts as highly structured HTML elements styled via a robust set of CSS variables. When you type > [!note] in your Markdown file, Obsidian parses this blockquote syntax and wraps the content in specific div containers.

The Role of CSS Variables

Obsidian utilizes CSS variables (also known as custom properties) to define the styling of callouts globally and individually. This design choice is what makes customizing them relatively straightforward. Instead of rewriting complex background gradients and border properties from scratch, you only need to override specific variables.

The two most critical variables for callouts are:

• --callout-color: Defines the base color of the callout. This must be formatted as comma-separated RGB values (e.g., 255, 0, 0 for red) rather than hex codes. Obsidian uses this base color to automatically calculate the background opacity and border colors.
• --callout-icon: Determines the SVG icon displayed next to the callout title. Obsidian natively supports the Lucide icon library, allowing you to reference any Lucide icon by its string name.

Data Attributes and Selectors

To target a specific callout type without affecting all blockquotes in your vault, you must use CSS attribute selectors. Every generated callout HTML element receives a data-callout attribute corresponding to the text inside the brackets. For example, > [!brainstorm] generates an element with data-callout="brainstorm".

Your CSS snippet will use the selector .callout[data-callout="brainstorm"] to apply styles exclusively to that specific type.

Locating and Managing Your CSS Snippets Folder

Obsidian stores all custom CSS files locally within your vault’s hidden configuration directory. To begin modifying callouts, you first need to access this directory.

1. Open your Obsidian vault.
2. Click the gear icon in the lower-left corner to open Settings.
3. Navigate to the Appearance tab in the left sidebar.
4. Scroll down to the CSS snippets section.
5. Click the small folder icon on the right side of this section.

Clicking this icon opens your operating system’s file explorer directly to the .obsidian/snippets directory. If the folder did not previously exist, Obsidian creates it automatically. This folder is where all your custom .css files will reside. It is highly recommended to use a dedicated code editor like Visual Studio Code or Sublime Text to edit these files, as they provide syntax highlighting and error checking that standard text editors lack.

Creating Your First Custom Callout Snippet

Let us create a brand new custom callout from scratch. We will build a “Deep Dive” callout designed for extensive research notes, utilizing a distinct purple color and a book icon.

Step 1: Create the CSS File

In your .obsidian/snippets folder, create a new plain text file and name it custom-callouts.css. Ensure the file extension is strictly .css and not .css.txt.

Step 2: Write the CSS Rule

Open custom-callouts.css in your preferred code editor. We will define the selector for our new deep-dive callout and assign the necessary CSS variables.

.callout[data-callout="deep-dive"] {
    --callout-color: 147, 51, 234; /* A vibrant purple */
    --callout-icon: lucide-book-open;
}

Notice the format of --callout-color. It explicitly requires RGB integers separated by commas. If you have a hex code (like #9333ea), you must convert it to RGB format before using it in this variable.

Step 3: Enable the Snippet in Obsidian

Save your custom-callouts.css file. Return to the Obsidian Appearance settings page. Next to the “CSS snippets” heading, click the Reload snippets icon (it looks like a circular arrow). Your new custom-callouts file should now appear in the list below. Toggle the switch next to it to the On position.

Step 4: Test Your Callout

Open any note in your vault and type the following Markdown syntax:

[!deep-dive] This is a custom callout designed for extensive research topics and long-form reference material.

If implemented correctly, the blockquote will immediately render as a purple callout featuring an open book icon.

Advanced Customization: Colors and Backgrounds

While overriding --callout-color handles the majority of the visual heavy lifting by automatically tinting the background and border, you might require more granular control over the aesthetic.

Modifying Background Opacity

By default, Obsidian takes your --callout-color RGB values and applies a low opacity to create the background tint (usually around 10%). If you want a solid background or a much lighter tint, you need to override the background-color property directly using the rgba() function.

.callout[data-callout="highlight"] {
    --callout-color: 250, 204, 21; /* Yellow */
    --callout-icon: lucide-zap;
    
    /* Override default background opacity */
    background-color: rgba(var(--callout-color), 0.25); 
}

In this snippet, we increase the background opacity to 25% (0.25). The var(--callout-color) syntax pulls the RGB values you defined above, ensuring the background color remains perfectly synced with the border and icon.

Dark Mode vs. Light Mode Adjustments

A color that looks excellent in dark mode might be completely illegible in light mode, and vice versa. Obsidian allows you to specify different variable values depending on the active theme using the .theme-dark and .theme-light selectors.

/* Default fallback (applies to both if not overridden) */
.callout[data-callout="project"] {
    --callout-icon: lucide-briefcase;
}

/* Light mode specific colors */
.theme-light .callout[data-callout="project"] {
    --callout-color: 37, 99, 235; /* Darker blue for visibility */
}

/* Dark mode specific colors */
.theme-dark .callout[data-callout="project"] {
    --callout-color: 96, 165, 250; /* Lighter blue for contrast */
}

Structuring your CSS this way ensures your custom callouts maintain high accessibility and contrast ratios regardless of which theme you are currently using.

Changing Callout Icons Using Lucide

Obsidian integrates the open-source Lucide icon library natively. This provides you with access to over a thousand high-quality SVG icons without needing to embed custom image files into your CSS.

To change an icon, you simply browse the Lucide icon library website (lucide.dev), find an icon that fits your semantic need, and prefix its name with lucide- in your CSS variable.

For example, if you find an icon named flask-conical on the Lucide site, your variable would be:

.callout[data-callout="experiment"] {
    --callout-icon: lucide-flask-conical;
    --callout-color: 16, 185, 129;
}

Removing Icons Entirely

Sometimes a clean, minimalist aesthetic is preferable, and an icon creates unnecessary visual noise. You can remove the icon from a specific custom callout by setting the variable to an empty string, or setting display: none on the icon element.

The cleanest method using standard Obsidian variables is:

.callout[data-callout="minimal"] {
    --callout-color: 107, 114, 128;
    --callout-icon: none;
}

If the --callout-icon: none; method fails due to theme overrides, you can force the icon to hide via CSS display properties:

.callout[data-callout="minimal"] .callout-icon {
    display: none;
}

Structural Formatting: Fonts, Borders, and Spacing

Customizing the internal structure of the callout—such as the title font weight, border thickness, and internal padding—requires targeting the specific child HTML elements within the main .callout container.

Targeting the Title and Content

A standard Obsidian callout consists of two primary child div elements: .callout-title and .callout-content.

If you want to create a “Quote” callout with a massive, stylized title and italicized body text, you would structure your CSS snippet like this:

.callout[data-callout="custom-quote"] {
    --callout-color: 244, 63, 94;
    --callout-icon: lucide-quote;
}

/* Style the title specifically */
.callout[data-callout="custom-quote"] .callout-title {
    font-size: 1.5em;
    font-family: 'Georgia', serif;
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* Style the body content */
.callout[data-callout="custom-quote"] .callout-content {
    font-style: italic;
    font-size: 1.1em;
    line-height: 1.6;
    padding-top: 10px;
}

Modifying Borders and Radii

The default Obsidian callout features a solid, thin border on all four sides. You can modify this to create entirely different visual styles, such as the popular “left-border only” style often seen in technical documentation.

.callout[data-callout="documentation"] {
    --callout-color: 14, 165, 233;
    --callout-icon: lucide-file-text;
    
    /* Remove background tint */
    background-color: transparent;
    
    /* Remove default borders and radius */
    border: none;
    border-radius: 0;
    
    /* Apply a thick left border */
    border-left: 5px solid rgb(var(--callout-color));
    
    /* Adjust padding to compensate for missing borders */
    padding-left: 15px;
}

This snippet completely transforms the structural appearance of the callout, moving it away from a bounded box and turning it into a sleek, side-accented block of text.

Practical Advice for Managing CSS Snippets

When implementing custom CSS in Obsidian, disorganized files can quickly lead to visual bugs and frustrating conflicts. Follow these best practices to maintain a clean workspace.

Consolidate Callout Styles Avoid creating a separate .css file for every single custom callout. Instead, maintain one centralized file named callouts.css or custom-callouts.css. Place all your .callout[data-callout="..."] blocks within this single file. This drastically reduces clutter in your snippets menu and makes updating colors much faster.

Comment Your Code Always leave CSS comments (/* comment here */) above your code blocks explaining what the callout is used for. Six months from now, you will not remember why you created a callout named data-callout="delta". Documenting your snippets saves significant reverse-engineering time later.

Use a HEX to RGB Tool Because Obsidian requires RGB values for --callout-color, trying to guess the RGB equivalent of a specific hex code from your vault’s theme is tedious. Bookmark a web-based Hex-to-RGB converter, or use a color picker tool in your code editor that displays both formats simultaneously. Remember to omit the rgb() wrapper when defining the variable—just input the three numbers separated by commas (e.g., 255, 255, 255).

Beware of Theme Overrides Community themes like Minimal, Things, or Blue Topaz heavily modify Obsidian’s core CSS. If your custom callout snippet is not working, your active community theme is likely utilizing higher-specificity CSS selectors that override your snippet. To fix this, you can append !important to your CSS rules as a last resort, though it is better practice to inspect the element using Obsidian’s developer tools (Ctrl+Shift+I / Cmd+Option+I) to write a more specific selector.

Synthesizing Your Callout Strategy

Using CSS snippets for Obsidian callouts shifts the platform from a rigid text editor into a highly personalized knowledge base. By mastering the --callout-color and --callout-icon variables, you remove the limitations of the default markdown syntax. Whether you are building distinct visual indicators for project statuses, separating distinct voices in a literature review, or just matching your vault’s exact color palette, custom callouts provide the structural and aesthetic flexibility required for advanced personal knowledge management.

Frequently Asked Questions

Can I use hex color codes instead of RGB for callout colors?

No, the native Obsidian implementation of --callout-color strictly requires comma-separated RGB values (e.g., 200, 100, 50). If you use a hex code like #C86432, the background opacity and border calculations will fail, resulting in broken or invisible callout formatting.

Why is my custom callout snippet not showing up in the settings list?

Ensure your file is saved with exactly a .css extension, not .txt or .css.txt. Operating systems often hide known file extensions, which can cause users to accidentally name their file snippet.css.txt. Verify the file type in your operating system’s file explorer properties.

Can I use custom image files or emojis as callout icons?

Yes, but you cannot use the --callout-icon variable for this. To use an emoji, simply type the emoji directly into the title bracket like > [!note] 🚀 Custom Title. To use a custom SVG file, you must encode the SVG as a base64 string and apply it as a background image via CSS, which is significantly more complex than using the integrated Lucide library.

How do I make my custom callout foldable by default?

You do not need CSS to make a callout foldable. You handle this directly in the Markdown syntax. Add a minus sign - immediately after the callout name to render it collapsed by default: > [!custom-name]- Title. Use a plus sign + to render it expanded but foldable: > [!custom-name]+ Title.

---

Related Reading

• Top 7 Obsidian CSS Snippets for a Clean Minimalist Look in 2026

• Top 7 Obsidian CSS Snippets for a Clean Minimalist Look in 2026

• What Are Obsidian Callouts (And Why They Are a Game-Changer)