Need css help... Again

[ThatBlockishWay]

So Im trying to make a fancy title for my page and I cant figure out how to put text over text (h1 over h1), Im doin this so I can have a text shadow and have the background be gradient to make the text look cool. It just puts the second h6 under the first so Ive got a shadow with no text and text with no shadow.

CSS

h1 {
    position: relative;
    padding-left: 37.5%;
    width: 25vw;
    top: 2vw;
    font-family: "DejaVu Sans Mono", monospace;
    text-align: center;
    letter-spacing: .6vw;
    font-size: 5vw;
    font-variant: small-caps;
    background: -webkit-radial-gradient(center, #1a1a1a, #004d80, black);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

mark.shdw {
    position: relative;
    width: 25vw;
    top:;
    font-family: "DejaVu Sans Mono", monospace;
    text-align: center;
    letter-spacing: .6vw;
    font-size: 5vw;
    font-variant: small-caps;
    text-shadow:
        -1px -1px 1vw #004d80,
        1px -1px 1vw #004d80,
        -1px 1px 1vw #004d80,
        1px 1px 1vw    #004d80,
        5px 5px 2vw #1a1a1a,
        -5px -5px 2vw #1a1a1a,
        5px -5px 2vw  #1a1a1a,
        -5px 5px 2vw #1a1a1a;
    background: none;
}

HTML

    <mark class="lrg">M</mark><mark class= "sml">_a^ker</mark>
    <mark class="shdw"><mark class="lrg">M</mark><mark class= "sml">_a^ker</mark></mark>

[Dujith]

There is a property for that: text-shadow

 

h6 {
    text-shadow: 2px 2px #ff0000;
}

with the 2px 2px you define the offset, in this example it will be 2px to the right and 2px to the bottom.

Last you specify the color of the shadow.

[ThatBlockishWay]

7 minutes ago, Dujith said:

There is a property for that: text-shadow

 

h6 {
    text-shadow: 2px 2px #ff0000;
}

with the 2px 2px you define the offset, in this example it will be 2px to the right and 2px to the bottom.

Last you specify the color of the shadow.

When I use text shadow on the text that uses the background as the color the shadow covers the background and makes it unseeable, so I need to put the text that uses the background over the text that has the shadow so itll have the background text for actual words and the shadow.

[duncannah]

You mention h6 but there's no h6 in your code?

[ThatBlockishWay]

10 minutes ago, duncannah said:

You mention h6 but there's no h6 in your code?

WHoops, I meant h1

[Dujith]

On 12/6/2018 at 8:36 PM, ThatBlockishWay said:

WHoops, I meant h1

Dont know if you still need this. But you should just define the text-shadow in the h1 tag. And not create that extra tag. 

That way you just need to work around the original shadow:

 

h1 {
  text-shadow: 3px 2px red, 4px 2px blue, 3px 3px blue, 2px 2px blue, 3px 1px blue;
}

The one in red will the main shadow, the next one is 1px to the left, the next one is 1px down, next is 1px left and last is 1px up.

This will create a outline around the shadow. Adjust to your own taste.