I am trying to achieve a transparency effect that closely resembles the one I have in vs-code, specifically focusing on the transparency without the blur effect.
obsidian:
vs-code:
Currently I’m using the css property background: transparent !important;, I’ve also tried with rgb settings but I can’t seem to disable or lower the blur.
Is it possible to replicate the clear transparency?
Thanks.
Try using opacity.
opacity: 1;
opacity: 0.5;
And also you can play a little with the brightness and saturation to get the desired effect.
opacity: 0.5; filter: brightness(50%) saturate(50%);
My example
.workspace-leaf-content .view-content {
z-index: 0;
}
.workspace-leaf-content .view-content::after {
z-index: -1;
content: "";
position: absolute;
background-image: url(https://source.unsplash.com/YeLs9lJDx9M);
background-repeat: no-repeat;
background-size: cover;
opacity: 0.5;
filter: brightness(50%) saturate(50%);
left: 0;
top: 0;
right: 0;
bottom: 0;
}
current css code:
body {
--workspace-background-translucent: rgba(var(--mono-rgb-0), 0.25);
--background-primary: #1e1e1e;
--tab-background-active: transparent;
--titlebar-background: transparent;
--tab-outline-color: transparent;
--text-normal: #f1f1f1;
--tab-font-size: 0.85em;
}
.workspace-tab-header.mod-active.is-active,
.workspace-split.mod-root,
.workspace-split.mod-root .view-content,
.workspace-split.mod-root .view-header,
.workspace-tab-container,
.view-header-title-container:not(.mod-at-end):after,
.custom-frames-frame,
.is-focused .workspace-leaf.mod-active .view-header {
background: transparent !important;
color: #fff;
}
Added as a reply my current css code for the transparency I have right now
Your solution is good if I want to put a background image, the problem is that what I am trying to do is apply a transparency so I can see my desktop.
For example, the result should look similar to the following (did this with an external software Glass2k):
But right now its currently like this:
Ah Ok, I get it, but I’m using the Linux version so I cannot test the translucent effect. Does this generates the same blur?
It still generates the same blur. Thanks either way, appreciate the effort
Probably the blur is coming from another property, let’s check in the inspector where the blur is being applied.
Just guessing here, try playing with this:
.theme-light {
--background-secondary-blur: hsl(220, 13%, 95%, 1);
}
.theme-dark {
--background-secondary-blur: hsla(0, 0%, 15%, 1);
}
It does not seem to change anything for me, maybe because I am using Windows. Another example, if I use the following background-primary values:
--background-primary: rgba(var(--mono-rgb-0), 0.25);
Instead of
--background-primary: #1e1e1e;`
It does seem to give the desired transparency effect without blur in this part.
from →
to →
But I can’t seem to get the same effect for the workspace
We need to find which property is applying the blur (Maybe it is in your theme, or an obsidian default). Use the inspector to check where the blur is being applied:
Another guess:
.theme-light .workspace {
backdrop-filter: none!important;
background-color: transparent;
}
.theme-dark .workspace {
backdrop-filter: none!important;
background-color: transparent;
}
body {
--background-primary: transparent;
--background-secondary: transparent;
}
I’m having the exact same issue. I’ve been trying everything I can think of. Custom themes, CSS snippets, and I’m currently digging through ctrl+shift+i to search for the variable that’s setting the actual background color. So far I can’t find anything, not even in reference to the existing translucency setting to try modifying that instead.
All this is to say: please keep me posted on if you’re able to get this working.
Anyone find a fix for this? Glass2k works, but it makes text transparent as well which isn’t ideal