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

[julianlyx]

Things I have tried

Hi community!

I have recently decided to use obsidian as my ZK. I was searching the web for the customizability of headers (colours). I came across this specific CSS snippet and have successfully changed the colour of my H1 header.

I have used the following code:

.important {
    color: red;
}

<div class="important"></div>

/* changing the color of the header in edit mode */
.cm-header-1 {
  color:rgb(203, 77, 73);
}

/* Gradient coloured headers in Edit and Preview mode */
.cm-s-obsidian .cm-header-1,
 .markdown-preview-view h1 {
  background: linear-gradient(to right, gold, coral); /* choose any 2 colors you like */
  -webkit-background-clip: text;
  color: transparent;
  width: fit-content;
}

/* Coloured headings for editor and preview in Dracula */
.cm-header-1, .markdown-preview-view h1
{
  font-family: var(--font-family-editor);
  font-weight: 500;
  font-size: var(--font-size-h1);
  color: var(--text-title-h1);
}

.cm-header-2, .markdown-preview-view h2
{
  font-family: var(--font-family-editor);
  font-weight: 500;
  font-size: var(--font-size-h2);
  color: var(--text-title-h2);
}

.cm-header-3, .markdown-preview-view h3
{
  font-family: var(--font-family-editor);
  font-weight: 500;
  font-size: var(--font-size-h3);
  color: var(--text-title-h3);
}

.cm-header-4, .markdown-preview-view h4
{
  font-family: var(--font-family-editor);
  font-weight: 500;
  font-size: var(--font-size-h4);
  color: var(--text-title-h4);
}

.cm-header-5, .markdown-preview-view h5
{
  font-family: var(--font-family-editor);
  font-weight: 500;
  font-size: var(--font-size-h5);
  color: var(--text-title-h5);
}

.cm-header-6, .markdown-preview-view h6
{
  font-family: var(--font-family-editor);
  font-weight: 500;
  font-size: var(--font-size-h6);
  color: var(--text-title-h6);
} */

/* Coloured headings for editor and preview, same font-weight in Edit & Preview */
.cm-s-obsidian .cm-header-1,
 .markdown-preview-view h1 {
  font-weight: 450;
  color: rgb(123, 108, 214); /* was(115, 98, 205); */
}

.cm-s-obsidian .cm-header-2,
 .markdown-preview-view h2 {
  font-weight: 450;
  color: rgb(123, 108, 214);
}

.cm-s-obsidian .cm-header-3,
 .markdown-preview-view h3 {
  font-weight: 450;
  color: rgb(123, 108, 214);
}

.cm-s-obsidian .cm-header-4,
 .markdown-preview-view h4 {
  font-weight: 450;
  color: rgb(123, 108, 214);
}

.cm-s-obsidian .cm-header-5,
 .markdown-preview-view h5 {
  font-weight: 450;
  color: rgb(123, 108, 214);
}

.cm-s-obsidian .cm-header-6,
 .markdown-preview-view h6 {
  font-weight: 450;
  color: rgb(123, 108, 214);
}

/* Underline H1 heading in Edit mode */
/* .cm-header-1 {
  border-bottom: 1px solid var(--text-accent);
} */

.cm-s-obsidian pre.HyperMD-header-1:after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: 1px;
  background: var(--text-accent); /* rgb(123, 108, 214); */
}

Source: obsidian-css-snippets/Snippets/Headers.md at master · Dmytro-Shulha/obsidian-css-snippets · GitHub

This has resulted in:

What I’m trying to do

I want to be able to make my other headers the same kind of gradient but i can’t seem to do it.

Thank you for any help. I’m a beginner in CSS/HTML and as such have no clue how to correct this…

Best,
Julian

[ZenMoto]

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?