# Custom styling white appears transparent in nested divs (all other colours work)

**URL:** <https://forum.obsidian.md/t/custom-styling-white-appears-transparent-in-nested-divs-all-other-colours-work/119007>\
**Category:** Devs: Theme Design & Custom CSS\
**Tags:** callouts, custom-css\
**Created:** [October 4, 2026, 3:21am UTC](https://forum.obsidian.md/t/custom-styling-white-appears-transparent-in-nested-divs-all-other-colours-work/119007 "2026-10-04T03:21:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thorned\_Rose](https://forum.obsidian.md/user_avatar/forum.obsidian.md/thorned_rose/32/45679_2.png) [@Thorned\_Rose](https://forum.obsidian.md/u/Thorned_Rose)\
**Post date:** [October 4, 2026, 3:21am UTC](https://forum.obsidian.md/t/custom-styling-white-appears-transparent-in-nested-divs-all-other-colours-work/119007/1 "2026-10-04T03:21:00Z")

</div>

### What I’m trying to do

I have a vault for running a TTRPG game. I wanted [Fantasy Statblock](https://community.obsidian.md/plugins/obsidian-5e-statblocks) _style_ callouts but using pure markdown with CSS styling. So I started by creating a custom callout that embeds the creature note within it:

```markdown
> [!statbox]
> ![[Acid Burrower]]

```

That works all fine. I am able to customise how it’s rendered with CSS all fine. The issue is with a specific part of the embedded note. The note itself also contains a custom callout which I named “corestats”. It has most of everything stripped out of it so it’s fairly plain text. Again, this works.

The but is that the nested call out cannot have a white background. Literally any other colour will work. But as soon as I try to set it to white, it shows as transparent (shows the background colour of the callout it’s nested within) :

 ![image](https://forum.obsidian.md/uploads/default/original/3X/9/3/932c3950d7a3cad0c35c342eb308f26dbac9ce27.jpeg)

(Please excuse the double up text in the call outs and some nonsense stuff in the CSS snippet, WIP and I’m only using these notes as tests).

### Things I have tried

I have tried using rgba colour instead. Same result, background-color: rgba(255,255,255,1) !important; will not display but background-color: rgba(100,250,200,1) !important; will (or almost\* any other colour that ISN’T white).

For example, if I do

```css
.callout[data-callout="statbox"] .callout[data-callout="corestats"] {
	background-color: #F0A !important;
	opacity: 1 !important;
}

```

I get:

 ![image](https://forum.obsidian.md/uploads/default/original/3X/a/b/abf033e7202403db4377dbc9fe1380fe22604f07.png)

It’s just white that appears as transparent. And I have no idea why.

I tried a variety of colours - #FFFFFE also appears transparent. So does #FFFFEE, #FFFEEE, #FFEEEE and #FEEEEE but #EEEEEE displays the correct colour. As does #EFFFFF.

It’s so weird, it’s like if the colour is similar to white, but not quite (hex code starts with an ‘F’) it will display transparent, but other light colours display fine.

Anyone know why this is happening and how I can fix it? Thanks!

---

<div class="post-metadata">

**Author:** ![ariehen](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ariehen/32/46932_2.png) [@ariehen](https://forum.obsidian.md/u/ariehen)\
**Post date:** [October 4, 2026, 4:07am UTC](https://forum.obsidian.md/t/custom-styling-white-appears-transparent-in-nested-divs-all-other-colours-work/119007/2 "2026-10-04T04:07:49Z")

</div>

Without having the full css for both callouts to look at, as well as knowing your theme and other settings, etc., this is just a guess, but you could be running into the mix-blend-mode that’s set by default for callouts.

Give something like this a try to see how it goes:

```css
.callout[data-callout="statbox"] {
    background-color: moccasin; 
}

.callout[data-callout="corestats"] {
    background-color: orange; 
}

.callout[data-callout="statbox"] .callout[data-callout="corestats"] {
    background-color: #fff;
    mix-blend-mode: normal; 
}

```

With `mix-blend-mode: normal` in the snippet,

 ![Screenshot 2026-10-04 at 13.00.15](https://forum.obsidian.md/uploads/default/original/3X/d/b/db21aa5eb763dc71ed84d7deff3804f4ca9c9858.png)

without it:

 ![Screenshot 2026-10-04 at 13.04.23](https://forum.obsidian.md/uploads/default/original/3X/d/5/d56546c1ef3b1368fe241e3b9fedc6618fcf4583.png)

* * *

If you wanted to set this globally for all callouts, you could use

```css
body {
    --callout-blend-mode: normal; 
}

```

---

<div class="post-metadata">

**Author:** ![Thorned\_Rose](https://forum.obsidian.md/user_avatar/forum.obsidian.md/thorned_rose/32/45679_2.png) [@Thorned\_Rose](https://forum.obsidian.md/u/Thorned_Rose)\
**Post date:** [October 4, 2026, 4:21am UTC](https://forum.obsidian.md/t/custom-styling-white-appears-transparent-in-nested-divs-all-other-colours-work/119007/3 "2026-10-04T04:21:03Z")

</div>

> [@ariehen](#):
>
> mix-blend-mode: normal

Amazing, THANK YOU so much! Been tearing my hair out on this for much of the day. That’s exactly it!  
Here’s the result:

 ![image](https://forum.obsidian.md/uploads/default/original/3X/7/d/7daf459efab80958135835b1d9c243edb0fd63b0.png)

And sorry, I realise I forgot to say that I am using Obsidian’s Default, Light theme.

Just in case this is useful for anyone else coming across this thread, here’s the full (WIP) CSS:

```css
.markdown-source-view.is-live-preview,
.markdown-reading-view {

	.callout[data-callout="statbox"] {
		padding: 0;
		background-color: #f4efe7;
		border: 2px solid #8c7233;
		corner-shape: bevel;
		border-radius: 6px;
		box-shadow: none;
		margin: 0;
		margin-left: 0.5em;
		width: auto;
		min-width: 15vw;
		max-width: 21vw !important;
		float: right !important;
	}

	.callout[data-callout="statbox"] .callout-title :is(.callout-icon, .callout-title-inner) {
		display: none;
	}

	.callout[data-callout="statbox"] .callout-content {
		padding: 0.5em;
		margin: 0;
	}

	.callout[data-callout="statbox"] .markdown-embed {
		border-inline-start: unset; //Get rid of the left border
	}

	.callout[data-callout="statbox"] .embed-title {
		font-family: Eveleth Clean Regular;
		font-size: unset;
		font-size: 125%;
		text-transform: uppercase;
		text-align: left;
		margin: 0;
		padding: 2px;
	}

	.callout[data-callout="statbox"] .markdown-embed-content {
		padding: 0.75em;
	}

	.callout[data-callout="statbox"] :is(h1, h2, h3, h4, h5, h6) {
		font-family: Questa Sans;
		font-weight: bold;
		font-size: unset;
		font-size: 125%;
		text-transform: uppercase;
		text-align: left;
		margin: 0;
		padding: 2px;
	}

	.callout[data-callout="statbox"] p {
		text-align: left;
	}

	.callout[data-callout="statbox"] .internal-embed, .callout[data-callout="statbox"] img {
		margin: auto;
		padding: auto;
		text-align: center;
	}

	@media print {
		.callout[data-callout="statbox"] {
			max-width: 400px;
		}
	}

/* The corestats formatting */

	.callout[data-callout="corestats"] {
		background: #FFF;
		opacity: 1;
		border-top: 2px solid #8c7233;
		border-bottom: 2px solid #8c7233;
		border-radius:0;
		padding: 0;
	}

	.callout[data-callout="corestats"] .callout-title :is(.callout-icon, .callout-title-inner) {
		display: none;
	}

	.callout[data-callout="corestats"] p {
		margin: 0.25em;
		padding: 0 1em 0 1em;
	}

	.callout[data-callout="corestats"] hr {
		border-top: 2px dotted #8c7233;
		margin:0;
	}
/* Alter the padding when it's nested within a statbox */
	.callout[data-callout="statbox"] .callout[data-callout="corestats"] p {
		padding: 0;
	}

	.callout[data-callout="statbox"] .callout[data-callout="corestats"] {
		background-color: #FFFFFF !important;
		opacity: 1 !important;
		mix-blend-mode: normal;
	}

}

```

Credit to SlRvb - This snippet started out life as part of the ITS Theme many moons ago: [Obsidian--ITS-Theme/Snippets/S - Callouts.css at main · SlRvb/Obsidian--ITS-Theme · GitHub](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/Snippets/S%20-%20Callouts.css)

(Just bear in mind that a number of things, like the fonts, I have hard coded because I just use this on my system and I’m not worried about making it compatible or flexible.)

---

<div class="post-metadata">

**Author:** ![system](https://forum.obsidian.md/uploads/default/original/3X/b/e/bec35fbd23ab28909bb6bfe62cb32eb82dd34019.png) [@system](https://forum.obsidian.md/u/system)\
**Post date:** [November 3, 2026, 4:21am UTC](https://forum.obsidian.md/t/custom-styling-white-appears-transparent-in-nested-divs-all-other-colours-work/119007/4 "2026-11-03T04:21:28Z")

</div>

Closed on November 3, 2026, 4:21am UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.