CSS Snippet is only available on editing mode

[barmaan]

Things I have tried

Hello. Hope you are having a great day. I just wrote a piece of code to make add Gradients to my heading. here is the code

.markdown-preview-view h1, .cm-header-1 {
    font-weight: 700;
    background: -webkit-linear-gradient(40deg, #209cff, #68e0cf)
    !important; -webkit-background-clip: text
    !important; -webkit-text-fill-color: transparent
    !important}

What I’m trying to do

But this code is only working inside editing mode. can someone please help me how can I get this gradient look in both editing and reading mode at the same time?

[holroy]

Have you seen this:

How to incoporate gradient colours for headers 2-6 as well?

Hey Julian. This will make gradient-color headers for h1-h6, in both reading mode AND editor mode: .cm-s-obsidian .cm-header, .markdown-rendered :is(h1, h2, h3, h4, h5, h6) { background: linear-gradient(to right, gold, coral); /* choose any 2 colors you like */ -webkit-background-clip: text; color: transparent; width: fit-content; } ^ that’s all you need (you can delete everything else.) Does that work for you?

[barmaan]

Thank you so much. I edited this code and find out the single width: fit-content;
piece is fixing my whole problem. don’t know why but it works.

Here is the new code I hope it helps.

.markdown-preview-view h1, .cm-header-1 {
    font-weight: 700;
    background: linear-gradient(40deg, #209cff, #68e0cf);
    -webkit-background-clip: text;
    color: transparent;
    width: fit-content;
}